import { BiRightArrowAlt } from 'react-icons/bi';
import type { JSX } from 'react';
import Image from 'next/image';
import { Button } from '@/shared/ui/button';
import Link from 'next/link';

interface IProductCardProps {
  item: {
    id: number;
    title: string;
    subtitle: string;
    description: string;
    image: string;
    category: {
      id: number;
      title: string;
    };
  };
}

const ProductCard = ({ item }: IProductCardProps): JSX.Element => {
  return (
    <div className="p-[15px] rounded-sm hover:shadow-2xl flex flex-col justify-between border duration-300 h-full bg-white">
      <Image
        className="w-full max-h-[170px] min-h-[170px] brightness-95 object-cover border border-black/5 shadow-xs rounded-sm"
        src={item.image}
        alt={item.title}
        width={300}
        height={300}
      />
      <div className="flex flex-col gap-1 mt-[10px] justify-between flex-1">
        <Link href={`/products/${item.id}`} className="text-center">
          <h4 className="text-center font-bold text-accent  hover:text-primary duration-200 text-[16px]">
            {item.title && item.title.length > 40
              ? `${item.title.slice(0, 40)}...`
              : item.title}
          </h4>
        </Link>
        <div className="flex justify-center"></div>
        <p className="text-[13px] font-medium text-muted text-center">
          {item.subtitle && item.subtitle.length > 80
            ? `${item.subtitle.slice(0, 80)}...`
            : item.subtitle}
        </p>
        <div className="text-center">
          <Link href={`/products/${item.id}`}>
            <Button variant={'primary'} className="relative">
              <span className="mb-[1px]">Просмотр</span>
              <BiRightArrowAlt />
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;
