import { TableRow, TableCell, Skeleton, Stack } from '@mui/material';

export const OrdersTableSkeleton = ({ rowsPerPage = 5, col = 1 }) => {
  return (
    <>
      {Array.from(new Array(rowsPerPage)).map((_, index) => (
        <TableRow key={index}>
          {/* Checkbox */}
          <TableCell>
            <Skeleton variant="circular" width={24} height={24} />
          </TableCell>

          {/* Serial Number */}
          <TableCell>
            <Skeleton variant="text" width={30} />
          </TableCell>

          {/* Delivery Info */}
          {Array.from({ length: col }).map((_, index) => (
            <TableCell key={index}>
              <Stack spacing={0.5}>
                <Skeleton variant="text" width={100} />
                <Skeleton variant="text" width={80} />
              </Stack>
            </TableCell>
          ))}

          {/* Notes */}
          <TableCell>
            <Skeleton variant="text" width={150} />
          </TableCell>

          {/* Order Status */}
          <TableCell>
            <Skeleton variant="rounded" width={60} height={24} />
          </TableCell>

          {/* Actions */}
          <TableCell align="center">
            <Stack direction="row" spacing={1} justifyContent="flex-end">
              <Skeleton variant="circular" width={28} height={28} />
              <Skeleton variant="circular" width={28} height={28} />
            </Stack>
          </TableCell>
        </TableRow>
      ))}
    </>
  );
};
