import { useCurrentUserGroup } from "@admin/hooks/useCurrentUserGroup";
import { CompanyLocation } from "@enos-monorepo/lib";
import { useEffect } from "react";

export function InactiveLocations({
  locations,
}: {
  locations: CompanyLocation[];
}) {
  useEffect(() => {
    console.log(locations);
    console.log(locations);
  }, [locations]);
  const { isSuperAdmin } = useCurrentUserGroup();
  return (
    <div className="card card-grid min-w-full mt-8">
      <div className="card-header py-5 flex-wrap justify-between">
        <h3 className="card-title">Inactive Locations</h3>
      </div>
      <div data-datatable="true" data-datatable-page-size="10">
        <div className="scrollable-x-auto">
          <table
            className="table table-auto table-border"
            data-datatable-table="true"
          >
            <thead>
              <tr>
                <th className="min-w-[200px]">
                  <span className="sort-label font-normal text-gray-700">
                    Name
                  </span>
                </th>
                <th>
                  <span className="sort-label font-normal text-gray-700 flex justify-center">
                    Actions
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              {locations && locations.length > 0 ? (
                locations.map((location) => (
                  <tr key={location.id}>
                    <td>
                      <div className="flex items-center gap-2.5">
                        <img
                          alt=""
                          className="rounded-full size-7 shrink-0"
                          src={
                            location?.avatarPhoto ?? "/media/avatars/blank.png"
                          }
                        />
                        <a
                          className="text-sm font-medium text-gray-900 hover:text-primary-active"
                          href="#"
                        >
                          <div>{location.name}</div>
                        </a>
                      </div>
                    </td>
                    <td className="w-[110px]">
                      <div className="flex justify-center">
                        <a
                          className="btn btn-sm btn-icon btn-clear btn-primary"
                          href="#"
                        >
                          <i className="ki-filled ki-notepad-edit"></i>
                        </a>
                        {isSuperAdmin && (
                          <a
                            className="btn btn-sm btn-icon btn-clear btn-success"
                            href="#"
                          >
                            <i className="ki-filled ki-left-square"></i>
                          </a>
                        )}
                      </div>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={4} className="text-center">
                    No Inactive locations available.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}


locations are not listing even though data is available. No Inactive locations available text is also not visible on the webpage