import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";

export default function FamilyTable({ className, familyList, loader }) {
  const filterCategories = ["All Categories", "Explore", "Featured"];
  console.log(familyList)
  const [selectedCategory, setCategory] = useState(filterCategories[0]);
  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
        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 relative">
            <thead className="sticky top-0">
            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
              <th className="py-4">Name</th>
              <th className="py-4 text-center">Last Login</th>
              <th className="py-4 text-center">No of Tasks</th>
              <th className="py-4 text-right">Status</th>
            </tr>
            </thead>
          <tbody className="overflow-y-scroll h-auto">
            {loader ? (
              <div className="signup btn-loader"></div>
            ) : (
              <>
                {familyList?.length > 0 ? (
                  familyList?.map(({ firstname, lastname, age }, idx) => (
                    <tr
                      className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
                      key={idx}
                    >
                      <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>
                  ))
                ) : (
                  <tr class="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                    <td class="p-2" colspan="4">
                      No Family Accounts Found!
                    </td>
                  </tr>
                )}
              </>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}