import DrawerAdmin from '../../components/Fragments/DrawerAdmin'
import DropdownButton from '../../components/Elements/Dropdown'
import Pagination from '../../components/Elements/Pagination'
import { FaPlus } from "react-icons/fa";
const ProductAdmin = () => {

    return (
        <>
            <DrawerAdmin>
                <div className='flex justify-start space-x-5 z-50 relative mb-3'>
                    <div className='flex items-center gap-5 mt-4 relative'>
                        <p className='font-semibold'>STATUS</p>
                        <DropdownButton className="absolute top-full mt-1 z-50" />
                    </div>
                    <div className='flex items-center gap-5 mt-4 relative'>
                        <p className='font-semibold'>CATEGORI</p>
                        <DropdownButton className="absolute top-full mt-1 z-50" />
                    </div>
                </div>

                <div className="overflow-x-auto ">
                    <div className="flex justify-start items-center space-x-4 ">
                        <button
                            className="flex items-center gap-2 border p-1.5 border-purple-500 rounded-lg text-purple-500"
                        >
                            <FaPlus className="text-purple-500" /> Add Product
                        </button>
                        <div className="  z-50 bg-white shadow-lg rounded-lg">
                            <DropdownButton />
                        </div>
                    </div>

                    <table className="table ">
                        {/* head */}
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Image</th>
                                <th>Product Name</th>
                                <th>Invoice number</th>
                                <th>Enty Date</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Expiration Date</th>

                            </tr>
                        </thead>
                        <tbody>
                            {/* row 1 */}
                            <tr>
                                <td>
                                    <p>P00RD1</p>
                                </td>
                                <td>
                                    <div className="flex items-center gap-3">
                                        <div className="avatar">
                                            <div className="mask h-20 w-12">
                                                <img
                                                    src="/image/produk.png"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p>Phytax Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe officiis quidem </p>
                                </td>
                                <td>
                                    <p>108473</p>
                                </td>
                                <td>
                                    <p>23 Aug 2024</p>
                                </td>
                                <td>
                                    <p>2000</p>
                                </td>
                                <td>
                                    <p>1.000.000</p>
                                </td>
                                <td>
                                    <p>22 Aug 2024</p>
                                </td>

                            </tr>
                            {/* row 2 */}
                            <tr>
                                <td>
                                    <p>P00RD1</p>
                                </td>
                                <td>
                                    <div className="flex items-center gap-3">
                                        <div className="avatar">
                                            <div className="mask h-20 w-12">
                                                <img
                                                    src="/image/produk.png"
                                                    alt="Avatar Tailwind CSS Component" />
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p>Phytax</p>
                                </td>
                                <td>
                                    <p>108473</p>
                                </td>
                                <td>
                                    <p>23 Aug 2024</p>
                                </td>
                                <td>
                                    <p>2000</p>
                                </td>
                                <td>
                                    <p>1.000.000</p>
                                </td>
                                <td>
                                    <p>22 Aug 2024</p>
                                </td>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <Pagination></Pagination>

            </DrawerAdmin>
        </>
    )
}

export default ProductAdmin