"use client";

import { CustomCard } from "@/components/ui/CustomCard";
import { Section } from "@/components/ui/Section";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useTranslation } from "@/lib/hooks/useTranslation";

export function CardSection() {
  const { t } = useTranslation();
  
  // Card data from translations
  const cardsData = [
    {
      title: t('cardSection.cards.0.title'),
      description: t('cardSection.cards.0.description'),
      imageSrc: "/assets/images/card1.png",
      imageAlt: t('cardSection.cards.0.imageAlt')
    },
    {
      title: t('cardSection.cards.1.title'),
      description: t('cardSection.cards.1.description'),
      imageSrc: "/assets/images/card2.png",
      imageAlt: t('cardSection.cards.1.imageAlt')
    },
    {
      title: t('cardSection.cards.2.title'),
      description: t('cardSection.cards.2.description'),
      imageSrc: "/assets/images/card3.png",
      imageAlt: t('cardSection.cards.2.imageAlt')
    }
  ];

  return (
    <Section>
      <div className="flex flex-col items-start">
        <SectionHeader 
          title={t('cardSection.title')}
          description={t('cardSection.description')}
          className="mb-[60px]"
        />
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full">
          {cardsData.map((card, index) => (
            <CustomCard
              key={index}
              title={card.title}
              description={card.description}
              imageSrc={card.imageSrc}
              imageAlt={card.imageAlt}
            />
          ))}
        </div>
      </div>
    </Section>
  );
}