import CategoryItemCard from "./CategoryItemCard"
import ArrowRight from "../../assets/images/ArrowRight.svg"
import {Link} from "react-router-dom";
import Button from "../Button"

export default function CategoryCard({category, index, onDelete}) {
    const previewProducts = category.products.length <= 4 ? category.products : category.products.slice(0, 4)
    return (
        <div key={index} className="flex flex-col bg-1 col-span-6 lg:col-span-3 xl:col-span-2 rounded-lg p-4 justify-between">
            <div className="flex justify-between">
                <div className="flex flex-col">
                    <span className="text-xl mb-2 font-[Vazirmatn]">{category.title}</span>
                    <span className="my-2 font-[Dana] text-[0.9rem]"> {category.products.length} محصول</span>
                </div>
                <div className="flex flex-row w-1/2 justify-start">
                    {
                        previewProducts.map((product, index) => (
                            <CategoryItemCard index={index} item={product}/>
                        ))
                    }
                </div>
            </div>
            <div className="flex flex-col lg:grid lg:grid-cols-3 pt-6 items-center">
                <span onClick={() => onDelete(category.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={`${category.category ? category.id : `/panel/categories/${category.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>
    )
}