import { IProduct } from '@/shared/types/testApi';
import Image from 'next/image';
import Link from 'next/link';
import type { JSX } from 'react';

interface IOurProductCardProps {
  item: IProduct;
}

const OurProductCard = ({ item }: IOurProductCardProps): JSX.Element => {
  return (
    <div className="relative group top-0 duration-300 hover:top-[-10px]">
      <Image
        className="w-full object-cover max-h-[200px] min-h-[200px] border rounded-md brightness-95"
        src={item.image}
        alt={item.title}
        width={200}
        height={200}
      />
      <div className="absolute inset-0 bg-primary/20 rounded-md origin-bottom scale-y-0 duration-500 group-hover:scale-y-100"></div>
      <div className="absolute bg-white/90 p-[10px] duration-300 opacity-0 group-hover:opacity-100 backdrop-blur-xs bottom-[15%] group-hover:bottom-[10%] left-[5%] right-[5%] rounded-sm">
        <Link href={'/products'}>
          <div className="text-accent font-bold text-[16px] hover:text-primary duration-200">
            {item.title && item.title.length > 30
              ? `${item.title.slice(0, 30)}...`
              : item.title}
          </div>
        </Link>
        <div className="text-[13px] text-muted font-medium">
          {item.subtitle && item.subtitle.length > 30
            ? `${item.subtitle.slice(0, 30)}...`
            : item.subtitle}
        </div>
      </div>
    </div>
  );
};

export default OurProductCard;
