import PropTypes from 'prop-types';

import { TableRow, TableCell } from '@astryxdesign/core/Table';
import { Skeleton } from '@astryxdesign/core/Skeleton';

// Placeholder rows for a loading table. Renders into an Astryx <TableBody>, so
// the host page's table must already be on Astryx's Table.
export default function TableLoader({ rows = 5, columns = 6, height = 40 }) {
  return (
    <>
      {[...Array(rows)].map((_, rowIndex) => (
        <TableRow key={rowIndex}>
          {[...Array(columns)].map((_, colIndex) => (
            <TableCell key={colIndex}>
              <Skeleton width={70} height={height} radius={2} index={colIndex} />
            </TableCell>
          ))}
        </TableRow>
      ))}
    </>
  );
}

TableLoader.propTypes = {
  rows: PropTypes.number,
  columns: PropTypes.number,
  height: PropTypes.number
};