'use client';

import type { JSX } from 'react';
import Link from 'next/link';
import { cn } from '@/shared/lib/utils';
import { cva } from 'class-variance-authority';
import Image from 'next/image';
import useFilterStore from '@/shared/store/filterStore';
import { ICategory } from '@/shared/types/testApi';

interface INewProductCardProps {
  item: ICategory;
  index: number;
}

const NewProductCard = ({ item, index }: INewProductCardProps): JSX.Element => {
  const variant = ('card' + ((index % 6) + 1).toString()) as
    | 'card1'
    | 'card2'
    | 'card3'
    | 'card4'
    | 'card5'
    | 'card6'
    | null
    | undefined;
  const { setCategoryId, setCurrentPage } = useFilterStore();

  const handleSelectCategory = (id: number | null) => {
    setCategoryId(id);
    setCurrentPage(1);
  };
  const variantsCardCircle = cva(
    'size-[100px] rounded-full border-[3px] border-transparent flex justify-center items-center text-[55px]',
    {
      variants: {
        variant: {
          card1:
            'bg-chart-1/20 group-hover:border-chart-1 duration-500 text-chart-1 group-hover:text-white',
          card2:
            'bg-chart-2/20 group-hover:border-chart-2 duration-500 text-chart-2 group-hover:text-white',
          card3:
            'bg-chart-3/20 group-hover:border-chart-3 duration-500 text-chart-3 group-hover:text-white',
          card4:
            'bg-chart-4/20 group-hover:border-chart-4 duration-500 text-chart-4 group-hover:text-white',
          card5:
            'bg-chart-5/20 group-hover:border-chart-5 duration-500 text-chart-5 group-hover:text-white',
          card6:
            'bg-chart-6/20 group-hover:border-chart-6 duration-500 text-chart-6 group-hover:text-white',
        },
      },
    },
  );

  const variantsCardBorder = cva(
    'relative border-[2px] bg-white shadow-sm p-[12px] py-[20px] h-full rounded-sm group top-0 hover:top-[-10px] duration-500',
    {
      variants: {
        variant: {
          card1:
            'border-transparent hover:border-chart-1 duration-500 text-accent hover:text-chart-1',
          card2:
            'border-transparent hover:border-chart-2 duration-500 text-accent hover:text-chart-2',
          card3:
            'border-transparent hover:border-chart-3 duration-500 text-accent hover:text-chart-3',
          card4:
            'border-transparent hover:border-chart-4 duration-500 text-accent hover:text-chart-4',
          card5:
            'border-transparent hover:border-chart-5 duration-500 text-accent hover:text-chart-5',
          card6:
            'border-transparent hover:border-chart-6 duration-500 text-accent hover:text-chart-6',
        },
      },
    },
  );

  return (
    <div className={cn(variantsCardBorder({ variant }))}>
      <div className="flex flex-col gap-4 justify-center items-center">
        <div className={cn(variantsCardCircle({ variant }))}>
          <Image
            className="size-[60px] rounded-md duration-200"
            src={item.image || ''}
            alt={item.title}
            width={200}
            height={200}
          />
        </div>
        <Link
          href={'products'}
          className="min-h-[40px] flex justify-center items-center"
          onClick={() => handleSelectCategory(item.id)}
        >
          <div className="font-extrabold duration-300 text-center">
            {item.title}
          </div>
        </Link>
      </div>
    </div>
  );
};

export default NewProductCard;
