'use client';

import ProductCard from '@/components/product/ProductCard';
import { getFeaturedProducts } from '@/lib/products';
import Button from '@/components/ui/Button';
import { ArrowRight } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { localizeProduct } from '@/lib/product-i18n';

export default function FeaturedProducts() {
  const { t } = useTranslation();
  const featured = getFeaturedProducts()
    .slice(0, 4)
    .map((p) => localizeProduct(p, t));

  return (
    <section className="py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
          <div>
            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
              {t('featured.label')}
            </span>
            <h2 className="section-heading">{t('featured.title')}</h2>
            <p className="mt-2 max-w-lg text-gray-500">{t('featured.subtitle')}</p>
          </div>
          <Button href="/shop" variant="secondary">
            {t('featured.viewAll')}
            <ArrowRight className="h-4 w-4 rtl:rotate-180" />
          </Button>
        </div>

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {featured.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </section>
  );
}