import { Metadata } from 'next'
import { t } from '@/lib/i18n'
import { ProductList } from '@/components/ProductList'
import { getAllProducts } from '@/lib/data'
import { Locale } from '@/lib/i18n'
import Link from 'next/link'

interface PageProps {
  params: {
    locale: Locale
  }
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  return {
    title: t('products.title', params.locale),
    description: t('products.description', params.locale),
  }
}

export default async function ProductsPage({ params }: PageProps) {
  const products = getAllProducts()

  // Get unique categories for this locale
  const categories = Array.from(
    new Set(products
      .filter(p => p.locale === params.locale)
      .flatMap(p => p.categories || [])
      .map(c => c.slug)
    )
  )

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">{t('products.title', params.locale)}</h1>
      
      {categories.length > 0 && (
        <div className="mb-8">
          <h2 className="text-xl font-semibold mb-4">{t('products.categories', params.locale)}</h2>
          <div className="flex flex-wrap gap-2">
            {categories.map((category) => (
              <Link
                key={category}
                href={`/${params.locale}/product-category/${category}`}
                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
              >
                {category}
              </Link>
            ))}
          </div>
        </div>
      )}

      {products.filter(p => p.locale === params.locale).length > 0 ? (
        <ProductList products={products.filter(p => p.locale === params.locale)} />
      ) : (
        <p className="text-gray-600">{t('products.noProducts', params.locale)}</p>
      )}
    </div>
  )
}