import images from '@/assets/images/images';
import SectionTitle from '@/components/layout/sectionTitle';
import type { IProductCategoryCardProps } from '../productCategories/productCategoryCard.d';
import { getProductCategories } from '@/services/products';
import Link from 'next/link';
import routeFactory from '@/assets/constants/routeFactory';
import { getTranslations } from 'next-intl/server';
import { ILayoutLocaleParams } from '@/models/layout';
import { TLocales } from '@/models/layout';

interface Props {
  locale: TLocales;
}

export default async function HomePageProducts({ locale }: Props) {
  const t = await getTranslations({ locale });
  const productCategories: IProductCategoryCardProps[] =
    await getProductCategories();
  const routes = routeFactory(t, locale);

  return (
    <div className="w-full">
      <div
        className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
        style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
      >
        <div className="absolute inset-0 z-10 bg-black opacity-50" />
        <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
          <SectionTitle
            title={t('pages_product_categories_title')}
            description={t('com_home_products_title')}
            reverseColor
          />
          <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
            {t('com_home_products_description')}
          </h4>
        </div>
      </div>

      <div className="relative top-[-100px] z-20 container mx-auto w-full">
        <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
          {productCategories.map((category, index) => (
            <Link key={category.id} href={routes.products.route(category.id)}>
              <div
                className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
              >
                <h3 className="text-xl font-bold text-gray-500">
                  {category.title}
                </h3>
                <p className="text-lg font-light text-gray-400">
                  {t('com_products_category_types_count', {
                    count: category.typesCount,
                  })}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}