import { formattedPrice } from "@/utils";

const ProductCard = ({ defaultImage, name, original, price }: any) => {

    return (
        <div className="group bg-white border border-gray-100 rounded overflow-hidden hover:shadow-lg transition-shadow duration-300 flex-shrink-0" style={{ minWidth: 220, flex: "1 0 220px" }}>
            <div className="relative overflow-hidden">
            <img src={defaultImage} alt={name} className="w-full h-72 object-cover group-hover:scale-105 transition-transform duration-500" />
            <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
                <button className="w-9 h-9 bg-white rounded-full shadow flex items-center justify-center hover:bg-[#30232a] hover:text-white transition-colors" aria-label="Add to cart">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18M16 10a4 4 0 01-8 0"/>
                </svg>
                </button>
            </div>
            </div>
            <div className="p-4">
            <h3 className="font-montserrat text-sm font-medium text-[#30232a] mb-2 line-clamp-2">{name}</h3>
            <div className="flex items-center gap-2">
                <span className="font-montserrat text-xs text-gray-400 line-through">{original}</span>
                <span className="font-montserrat text-sm font-semibold text-amber-700">{formattedPrice(price)}</span>
            </div>
            </div>
        </div>
    )
};

export default ProductCard