import React from 'react';

import LoadingPlaceholder from 'components/loading-placeholder/LoadingPlaceholder';

import TableBody from './TableBody';
import TableRow from './TableRow';
import TableCell from './TableCell';

interface IPlaceholderProps {
  size: number;
  width: number;
  color?: string;
}

interface ILoadingTableBodyProps {
  rowCount?: number;
  colCount?: number;
  placeholderProps?: IPlaceholderProps;
  firstColor?: string;
}

const LoadingTableBody = ({
  rowCount = 5,
  colCount = 5,
  placeholderProps = { size: 16, width: 100 },
  firstColor,
}: ILoadingTableBodyProps) => (
  <TableBody>
    {Array(rowCount).fill(0).map((_r, i) => (
      <TableRow key={i}>
        {Array(colCount).fill(0).map((_c, j) => {
          const color = firstColor && j === 0 ? firstColor : placeholderProps.color;

          return (
            <TableCell key={j}><LoadingPlaceholder {...placeholderProps} color={color} /></TableCell>
          );
        })}
      </TableRow>
    ))}
  </TableBody>
);

export default LoadingTableBody;