import categoryIcon from "./../../assets/images/CategoryTagIcon.svg"
import {Link} from "react-router-dom";

export default function ProductTable({products}) {
    const products_list = products.map(product => {
            return (
                <tr key={product.id} className="border-y text-right font-normal">
                    <td className="py-4 pr-2 ">
                        <Link to={`${product.id}`}>
                            {product.title}
                        </Link>
                    </td>
                    <td className="py-4 text-lg">{product.id}</td>
                    <td className="py-4 flex items-center">
                        <div className={'bg-[#F6FFED] flex rounded-2xl w-fit px-4 py-1'}>
                            <img src={categoryIcon} alt={''}/>
                            <span className={'mr-1 text-3 font-[Vazirmatn]'}>{product.category.title}</span>
                        </div>
                    </td>
                    <td className="py-4">{product.viewCount ? product.viewCount : 0} بازدید</td>
                    <td className="py-4">{product.sells ? product.sells : 0} عدد</td>
                    <td className="py-4">{product.available ? product.available : 0} عدد</td>
                    <td className="py-4 pl-2">{product.price ? product.price : 0} تومان</td>
                </tr>
            )
        }
    );


    return (
        <div className="w-full flex flex-col bg-1 font-[Vazirmatn]">
            <table className="w-full text-right">
                <thead className={'text-white font-medium bg-dark w-full'}>
                <tr>
                    <th className={'p-3'} style={{borderTopRightRadius: '15px'}}>نام محصول</th>
                    <th>کد محصول</th>
                    <th>دسته بندی</th>
                    <th>تعداد بازدید</th>
                    <th>فروش</th>
                    <th>موجودی</th>
                    <th style={{borderTopLeftRadius: '15px'}}>قیمت</th>
                </tr>
                </thead>
                {products_list}
            </table>
        </div>
    );
}