'use client';

import AchievementTextBox from '@/components/layout/achievementTextBox';
import type { IProductCategoryCardProps } from './productCategoryCard.d';
import { Icon } from '@/components/uikit/icons';
import { useTranslations } from 'next-intl';

export default function ProductCategoryCardInProducts({
  productCategory,
  className,
}: {
  productCategory: IProductCategoryCardProps;
  className?: string;
}) {
  const t = useTranslations();

  return (
    <div className="">
      <div
        className={`bg-primary relative grid overflow-hidden rounded-4xl p-6 max-lg:pt-24 max-lg:pb-12 lg:grid-cols-2 lg:p-20 lg:pe-40 ${className}`}
      >
        <div className="absolute -end-2 -top-2">
          <Icon
            name={productCategory.icon}
            className="h-24 w-24 text-white md:h-36 md:w-36"
          />
        </div>
        <div className="flex flex-col gap-5">
          <h1 className="text-2xl font-semibold text-white">
            {t('com_products_products_category_title', {
              title: productCategory.title,
            })}
          </h1>
          <AchievementTextBox
            reverseColor
            title={t('com_products_category_types_count', {
              count: productCategory.typesCount,
            })}
          />
          <AchievementTextBox
            reverseColor
            title={productCategory.priceTypeTitle}
          />
          <AchievementTextBox
            reverseColor
            title={productCategory.bestForTitle}
          />
        </div>
        <p className="text-xl text-white max-lg:hidden">
          {productCategory.description}
        </p>
      </div>
      <p className="mt-5 text-xl text-gray-500 lg:hidden">
        {productCategory.description}
      </p>
    </div>
  );
}
