import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableRow,
} from "@/components/ui/table";

export default function PaymentLoading() {
  return (
    <div className="mx-2">
      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
        <Skeleton className="h-8 w-48" />
      </div>
      <div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
        <Skeleton className="h-5 w-36" />
      </div>
      <div className="flex flex-col gap-3 w-full">
        {Array.from({ length: 1 }).map((_, i) => (
          <Skeleton
            key={`${i + 1}`}
            className="w-full border border-gray-300 h-13 rounded-sm"
          />
        ))}
        <div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
          <div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
            <Table>
              <TableBody className="">
                <TableRow>
                  <TableCell>Payment created</TableCell>
                  <TableCell className="text-right">
                    <Skeleton className="h-5 inline-block w-24" />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Total Devices</TableCell>
                  <TableCell className="text-right text-xl">
                    <Skeleton className="h-5 w-24 inline-block" />
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell>Duration</TableCell>
                  <TableCell className="text-right text-xl">
                    <Skeleton className="h-5 w-24 inline-block" />
                  </TableCell>
                </TableRow>
              </TableBody>
              <TableFooter>
                <TableRow className="">
                  <TableCell colSpan={1}>Total Due</TableCell>
                  <TableCell className="text-right text-3xl font-bold">
                    <Skeleton className="h-5 w-24 inline-block" />
                  </TableCell>
                </TableRow>
              </TableFooter>
            </Table>
          </div>
        </div>
      </div>
    </div>
  );
}