import { Skeleton } from "@mui/material";

type TableSkeletonRowsProps = {
  rows?: number;
  columns: { key: string; width: number }[];
  rowHeight?: number;
};

export function TableSkeletonRows({ rows = 3, columns, rowHeight = 52 }: TableSkeletonRowsProps) {
  return (
    <>
      {Array.from({ length: rows }, (_, rowIndex) => (
        <tr key={rowIndex} style={{ height: rowHeight }}>
          {columns.map((col) => (
            <td key={col.key} style={{ padding: "0 14px", width: col.width, minWidth: col.width }}>
              <Skeleton
                variant="rounded"
                height={14}
                width="72%"
                animation="wave"
                sx={{ bgcolor: "action.hover" }}
              />
            </td>
          ))}
        </tr>
      ))}
    </>
  );
}