import Link from "next/link"

interface ProductItemProps {
    _id: string;
    name: string;
    brand?: { name: string }[];
    categories?: { name: string }[];
    image?: string;
    description?: string;
}


const ProductItem: React.FC<ProductItemProps> = ({ _id, name, brand, categories, image , description }) => {


    return (
        <Link
            href={`/products/${_id}`}
            prefetch={false}
            className="flex min-w-0 flex-col gap-3 bg-white cursor-pointer border hover:shadow-lg hover:border-primary duration-200 pt-4 group"
        >
            <div className="flex min-w-0 flex-col px-4 z-10">
                <span className="break-words font-semibold"> { brand && brand[0].name}</span>
                <span className="break-words"> { categories &&  categories[0].name }</span>
                <span className="break-words font-semibold text-lg"> {name}  </span>
              

            </div>
            <div className="h-60 lg:h-64 2xl:h-80 relative w-full py-6 flex justify-center items-center flex-1">
                {image && (
                    <img
                        src={image}
                        alt={name}
                        loading="lazy"
                        decoding="async"
                        className="px-4 object-contain w-52 h-52"
                    />
                )}

            </div>
            <div className="text-xs py-3 px-4 h-[58px] overflow-hidden">
                 { description &&  description.replace(/<[^>]+>/g, '')}
            </div>


            <div className="flex justify-between items-center   ">
                <div className="group-hover:bg-primary px-3 duration-300 text-primary font-semibold group-hover:text-white w-full h-full py-3 text-sm"> Seçenekleri İnceleyin</div>
                <div className="basis-12 flex items-center text-center duration-300  font-semibold  group-hover:text-white group-hover:bg-black py-3 justify-center " > {' > '} </div>
            </div>
        </Link>


    )


}

export default ProductItem