import viewIcon from "./../../assets/images/EyeIcon.svg"
import categoryIcon from "./../../assets/images/CategoryTagIcon.svg"
import sellsIcon from "./../../assets/images/ProductSellsIcon.svg"
import availableIcon from "./../../assets/images/ProductAvailableIcon.svg"
import priceIcon from "./../../assets/images/ProductPriceIcon.svg"
import Button from "../Button"
import {EnglishToPersian} from "../../helpers/EnglishToPersian";
import {Link} from "react-router-dom";
export default function ProductCard({product, category, onDelete}) {
    return (
        <div className={'shadow transition duration-600 hover:shadow-sm col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 rounded-xl flex flex-col justify-between bg-1'}>
            <img className={'rounded-top-3 shadow-sm product-card-image'} src={product.images[0]?.path} alt={product.title}/>
            <div className={'p-4 flex flex-col'}>
                <div className="flex justify-between">
                    <div className={'flex rounded-2xl pb-2 w-fit'}>
                        <img className="hue-rotate-180" src={categoryIcon} alt={''}/>
                        <span className={'mr-1 text-sm min-w-fit text-3 font-[Vazirmatn]'}>{product.category ? product.category.title : category}</span>
                    </div>
                </div>
                <span className={'font-[Vazirmatn] font-base text-lg'}>{product.title}</span>
                {product.detail ? (
                <div className={'grid grid-cols-2 px-2 pt-6'}>
                        <div className={'flex col-span-2 lg:col-span-1 font-[Vazirmatn]'}>
                            {EnglishToPersian(product.inventory? product.inventory.toString() : '0')} موجود
                        </div>
                        <div className={'flex justify-end col-span-2 lg:col-span-1 justify-end font-medium font-[Vazirmatn]'}>
                            {EnglishToPersian(product.details.filter((detail) => detail.slug == "price")[0]? product.details.filter((detail) => detail.slug == "price")[0].value : '0')} تومان
                        </div>
                </div>
                ) : null}
                <div className="flex flex-col lg:grid lg:grid-cols-3 pt-6 items-center">
                    <span onClick={() => onDelete(product.id)} className="text-4 cursor-pointer hover:opacity-80 underline w-full h-fit text-center items-center justify-center">
                        حذف
                    </span>
                    <Link className="w-full col-span-2" to={`${product.category ? product.id : `/panel/products/${product.id}`}`}>
                        <Button className="w-full font-[Vazirmatn] bg-gradient-to-r from-4 to-purp text-white transition duration-300 hover:opacity-80">
                            <span className="">ویرایش</span>
                        </Button>   
                    </Link>
                </div>
            </div>
        </div>
    )
}