import type { UserData } from "@/features/users/lib/data";
import { UserCard } from "@/features/users/ui/UserCard";
import { Loader2 } from "lucide-react";
import { type Dispatch, type SetStateAction } from "react";

interface Props {
  data: UserData[] | undefined;
  isLoading: boolean;
  isError: boolean;
  setDialogOpen: Dispatch<SetStateAction<boolean>>;
  setEditingUser: Dispatch<SetStateAction<UserData | null>>;
  setOpenDelete: Dispatch<SetStateAction<boolean>>;
  setUserDelete: Dispatch<SetStateAction<UserData | null>>;
}

const UserTable = ({
  data,
  isLoading,
  isError,
  setDialogOpen,
  setEditingUser,
  setOpenDelete,
  setUserDelete,
}: Props) => {
  return (
    <div className="flex-1 overflow-auto">
      {isLoading && (
        <div className="h-full flex items-center justify-center bg-white/70 z-10">
          <Loader2 className="animate-spin" />
        </div>
      )}
      {isError && (
        <div className="h-full flex items-center justify-center z-10">
          <span className="text-lg font-medium text-red-600">
            Ma'lumotlarni olishda xatolik yuz berdi.
          </span>
        </div>
      )}

      {!isLoading && !isError && (
        <>
          {/* Users Grid */}
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {data?.map((user) => (
              <UserCard
                setOpenDelete={setOpenDelete}
                setUserDelete={setUserDelete}
                key={user.id}
                setDialogOpen={setDialogOpen}
                setEditingUser={setEditingUser}
                user={{ ...user, role: user.is_superuser ? "admin" : "user" }}
              />
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default UserTable;