import images from '@/assets/images/images';
import InnerPageBanner from '@/components/layout/innerPages/banner';
import ProductsCategoryCard from '@/components/pages/productCategories/ProductCategoryCard';
import type { IProductCategoryCardProps } from '@/components/pages/productCategories/productCategoryCard.d';
import { IPageParams } from '@/models/layout';
import { getProductCategories } from '@/services/products';
import { getTranslations, setRequestLocale } from 'next-intl/server';

export async function generateMetadata({ params }: { params: IPageParams }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });

  return {
    title: t('page_products_metadata_title'),
    description: t('page_products_metadata_description'),
  };
}

export default async function ProductsPage({
  params,
}: {
  params: IPageParams;
}) {
  const { locale } = await params;
  const t = await getTranslations({ locale });
  const productCategories: IProductCategoryCardProps[] =
    await getProductCategories();

  return (
    <main>
      <InnerPageBanner
        title={t('pages_product_categories_title')}
        imageSrc={images.aboutBanner.src}
      />
      <div className="container-fluid mx-auto my-12 md:my-24">
        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {productCategories.map((category) => (
            <ProductsCategoryCard key={category.id} {...category} />
          ))}
        </div>
        <div className="mt-20">
          <h2 className="mb-4 text-2xl font-semibold text-gray-500">
            {t('pages_products_content_title')}
          </h2>
          <p className="text-base font-light text-gray-400">
            {t('pages_products_content_description')}
          </p>
        </div>
      </div>
    </main>
  );
}
