import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";

export default function MyJobTable({MyJobList, className }) {
    const filterCategories = ["All Categories", "Explore", "Featured"];
    const [selectedCategory, setCategory] = useState(filterCategories[0]);
    return (
        <div
            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
                className || ""
            }`}
        >
            <div className="header w-full flex justify-between items-center mb-5">
                <div className="flex space-x-2 items-center">
                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
                        Products History
                    </h1>
                </div>
                <SelectBox
                    action={setCategory}
                    datas={filterCategories}
                    className="Update-table-dropdown"
                    contentBodyClasses="w-auto min-w-max"
                />
            </div>
            <div className="relative w-full overflow-x-auto sm:rounded-lg">
                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <tbody>
                    <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
                        <td className="py-4">All Product</td>
                        <td className="py-4 text-right">.</td>
                    </tr>

                    {selectedCategory === "All Categories" ? (
                        <>
                            {MyJobList && MyJobList?.result_list &&
                                MyJobList.result_list.length > 0 &&
                                MyJobList.result_list.map((value) => (
                                   <>
                                       <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                           <td className=" py-4">
                                               <div className="flex space-x-2 items-center">
                                                   <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                                                       <img
                                                           src={dataImage2}
                                                           alt="data"
                                                           className="w-full h-full"
                                                       />
                                                   </div>
                                                   <div className="flex flex-col">
                                                       <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                                                           {value.title}
                                                       </h1>
                                                       <span className="text-sm text-thin-light-gray">
                          Price <span className="text-purple">{value.price*0.01}</span>
                                                           {value.timeline_days} day(s)
                        </span>
                                                   </div>
                                               </div>
                                           </td>


                                           <td className="text-right py-4 px-2">
                                               <button
                                                   type="button"
                                                   className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
                                               >
                                                   View
                                               </button>
                                           </td>
                                       </tr>

                                   </>
                                ))}


                        </>
                    ) : selectedCategory === "Explore" ? (
                        <>

                        </>
                    ) : (
                        <>

                        </>
                    )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}