'use client'

import { Language, PitchProduct } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import PricingCard from '../ui/PricingCard'

interface ProductSlideProps {
  lang: Language
  products: PitchProduct[]
}

export default function ProductSlide({ lang, products }: ProductSlideProps) {
  const i = t(lang)

  return (
    <div>
      <FadeInView className="text-center mb-12">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.product.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.product.subtitle}</p>
      </FadeInView>

      <div className="grid md:grid-cols-3 gap-6">
        {products.map((product, idx) => (
          <PricingCard key={product.id} product={product} lang={lang} delay={0.2 + idx * 0.15} />
        ))}
      </div>
    </div>
  )
}