import { getTranslations } from 'next-intl/server';
import { Container } from '@/components/ui/container';
import { Reveal } from '@/components/ui/reveal';
import { ProductListing } from '@/components/listing/product-listing';
import { getPublishedProducts, getCategories } from '@/lib/queries';
import { buildMetadata } from '@/lib/seo';
import type { Locale } from '@/i18n/config';

export async function generateMetadata({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'nav' });
  return buildMetadata({
    locale,
    path: '/products',
    title: t('products'),
    description:
      locale === 'ar'
        ? 'معدات وأجهزة الطاقة الشمسية للمنازل والشركات.'
        : "Équipements et produits solaires pour particuliers et professionnels."
  });
}

export default async function ProductsPage({ params: { locale } }: { params: { locale: Locale } }) {
  const [products, categories] = await Promise.all([
    getPublishedProducts(locale),
    getCategories(locale)
  ]);

  return (
    <Container className="py-16">
      <Reveal variant="up">
        <h1 className="font-display text-3xl font-semibold">
          {locale === 'ar' ? 'المتجر' : 'Boutique'}
        </h1>
      </Reveal>
      <ProductListing products={products} categories={categories} locale={locale} />
    </Container>
  );
}