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

export default function FamilyTable({ className, familyList, loader }) {
  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-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
        className || ""
      }`}
    >
      <div className="relative w-full overflow-x-auto sm:rounded-lg">
        {loader ? (
          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
            <LoadingSpinner size="16" color="sky-blue" />
          </div>
        ) : (
          <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">
                <>
                  {familyList?.length > 0 ? (
                    familyList?.map(
                      (
                        { firstname, lastname, age, added, last_login },
                        idx
                      ) => {
                        let addedDate = added?.split(" ")[0];
                        return (
                          <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 ml-1">
                                      {addedDate}
                                    </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">
                                  {last_login}
                                </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 flex items-center justify-center">
                              <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 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                      <td className="p-2" colSpan="4">
                        No Family Accounts Found!
                      </td>
                    </tr>
                  )}
                </>
              </tbody>
            </>
          </table>
        )}
      </div>
    </div>
  );
}
