import React from "react";
import Link from "next/link";
import { BsArrowUpRightCircle } from "react-icons/bs";

const ProductCard = ({ product }) => {
    return (
        <Link href={'/'} className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 group">

            {/* IMAGE */}
            <div className="bg-[#f6f6f6] flex justify-center items-center">
                <img
                    src={product?.img}
                    alt={product?.name}
                    className="w-full lg:max-h-[350px] max-h-[250px] object-cover transition duration-500 group-hover:scale-105"
                />
            </div>

            {/* CONTENT */}
            <div className="p-6 relative">

                {/* PRODUCT NAME */}
                <span href={'/'} className="text-lg lg:text-[18px] font-serif hover:text-amber-600 group-hover:text-amber-600 transition-all duration-300 text-gray-800 tracking-wide truncate block">
                    {product?.name}
                </span>

                {/* DESCRIPTION */}
                <p className="text-gray-500 text-sm mt-3 leading-relaxed line-clamp-2">
                    {product?.description ||
                        "High quality spray paint designed for durability and vibrant color. Perfect for various surfaces, providing a smooth finish and long-lasting protection."}
                </p>

                {/* DIVIDER */}
                <div className="h-[1px] bg-gray-200 my-5"></div>

                {/* ACTION AREA */}
                <div className="flex items-center justify-between">

                    {/* VIEW BUTTON */}
                    <span
                        // href={`/products/${product?.slug || ""}`}
                        className="bg-amber-500 relative z-[1] text-white px-5 py-2.5 rounded-full text-sm font-semibold group-hover:bg-gray-800 transition text-[12px] flex justify-center items-center gap-2 "
                    >
                        VIEW DETAILS <BsArrowUpRightCircle className="group-hover:rotate-45" />
                    </span>

                </div>
            </div>
        </Link>
    );
};

export default ProductCard;