---
import ServiceCard from './ServiceCard.astro';
import type { TranslationKey } from '@/i18n/ui';

interface Service {
  slug: string;
  title: string;
  description: string;
  Icon: any;
}

interface Props {
  categoryTitle: string;
  categoryKey: TranslationKey;
  services: Service[];
  lang: 'es' | 'en';
}

const { categoryTitle, categoryKey, services, lang } = Astro.props;
const base = lang === 'en' ? '/en' : '';
---
<div class="mb-12 last:mb-0">
  <div class="flex items-baseline justify-between mb-6">
    <h3 class="text-2xl md:text-3xl text-hds-tinta">
      {categoryTitle}
    </h3>
    <span class="text-xs font-semibold tracking-wider uppercase text-hds-coral">
      {categoryKey}
    </span>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
    {services.map((service) => (
      <ServiceCard
        href={`${base}/servicios/${service.slug}/`}
        title={service.title}
        description={service.description}
        Icon={service.Icon}
      />
    ))}
  </div>
</div>
