'use client';

import { Icon } from '@/components/uikit/icons';
import type { IProductCategoryCardProps } from './productCategoryCard.d';
import AchievementTextBox from '@/components/layout/achievementTextBox';
import Button from '@/components/uikit/button';
import routeFactory from '@/assets/constants/routeFactory';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';

export default function ProductsCategoryCard({
  icon,
  title,
  typesCount,
  priceTypeTitle,
  bestForTitle,
  id,
}: IProductCategoryCardProps) {
  const t = useTranslations();
  const params = useParams();
  const locale = params.locale as string;
  const routes = routeFactory(t, locale);

  return (
    <div className="relative overflow-hidden rounded-4xl bg-gray-100 p-3 sm:p-6 md:p-10">
      <div className="absolute -end-2 -top-2">
        <Icon name={icon} className="text-primary h-36 w-36" />
      </div>

      <div className="flex flex-col gap-4 pt-32">
        <h2 className="text-xl font-semibold text-gray-500">{title}</h2>
        <AchievementTextBox
          title={t('com_products_category_types_count', { count: typesCount })}
        />
        <AchievementTextBox title={priceTypeTitle} />
        <AchievementTextBox title={bestForTitle} />
      </div>
      <div className="mt-24 w-auto">
        <Button
          link={routes.products.route(id)}
          endIcon="showMore"
          className="w-fit"
        >
          {t('com_products_category_show_all_CTA')}
        </Button>
      </div>
    </div>
  );
}
