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 FamilyTable({ 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="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">Name</td>
                        <td className="py-4 text-center">Last Login</td>
                        <td className="py-4 text-center">No of Tasks</td>
                        <td className="py-4 text-right">Status</td>
                    </tr>
                    <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={dataImage1}
                                        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">
                                        Firstname Lastname (age)
                                    </h1>
                                    <span className="text-sm text-thin-light-gray">
                          Added <span className="text-purple">10-10-2029</span>
                        </span>
                                </div>
                            </div>
                        </td>
                        <td className="text-center py-4 px-2">
                            <div className="flex space-x-1 items-center justify-center">

                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                       10-10-2019
                      </span>
                            </div>
                        </td>
                        <td className="text-center py-4 px-2">
                            <div className="flex space-x-1 items-center justify-center">

                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
                        100
                      </span>
                            </div>
                        </td>

                        <td className="text-right py-4 px-2">
                            <button
                                type="button"
                                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                                Manage
                            </button>
                        </td>
                    </tr>


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