import { Skeleton } from "@/components/ui/skeleton";
import React from "react";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const TaskSkeletonItem = () => {
  const arrNumbers = Array(Math.round(5))
    .fill(0)
    .map((_, i) => {
      const id = i + 1;
      return id;
    });
  return (
    <div className="mb-3 w-full">
      <Skeleton className="h-3.5 w-48 ml-2 rounded-md" />

      <div className="w-full">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[100px]">
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
              <TableHead>
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
              <TableHead>
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
              <TableHead className="text-right">
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
              <TableHead className="text-right">
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
              <TableHead className="text-right">
                <Skeleton className="h-5 w-full rounded-md" />
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {arrNumbers.map((number) => {
              return (
                <TableRow key={number}>
                  <TableCell>
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                  <TableCell>
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                  <TableCell>
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                  <TableCell className="text-right">
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                  <TableCell className="text-right">
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                  <TableCell className="text-right">
                    <Skeleton className="h-2 w-full rounded-md" />
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

const TasksListSkeleton = ({ quantity = 2 }: { quantity?: number }) => {
  const arrNumbers = Array(Math.round(quantity))
    .fill(0)
    .map((_, i) => {
      const id = i + 1;
      return id;
    });

  return (
    <div className=" mt-5">
      <div className="space-y-10">
        {arrNumbers.map((number) => {
          return <TaskSkeletonItem key={number} />;
        })}
      </div>
    </div>
  );
};

export default TasksListSkeleton;