import Skeleton from '@design-system/Skeleton';
import Stack from '@mui/material/Stack';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';

import { type SatisfactionTableContentSkeletonProps } from './types';

const SatisfactionTableContentSkeleton = ({
  rows = 5,
  hasDifferenceColumn = false,
}: SatisfactionTableContentSkeletonProps) => {
  return (
    <>
      {Array.from({ length: rows }).map((_, index) => (
        <TableRow key={index}>
          <TableCell>
            <Stack sx={{ gap: 1 }}>
              <Skeleton
                width={220}
                height={20}
              />
              <Skeleton
                width={120}
                height={16}
              />
            </Stack>
          </TableCell>
          <TableCell>
            <Skeleton
              width={26}
              height={24}
            />
          </TableCell>
          {hasDifferenceColumn && (
            <TableCell>
              <Skeleton
                width={26}
                height={24}
              />
            </TableCell>
          )}
          <TableCell>
            <Skeleton
              variant="rounded"
              width="100%"
              height={8}
            />
          </TableCell>
          <TableCell sx={{ width: 24 }}></TableCell>
        </TableRow>
      ))}
    </>
  );
};

export default SatisfactionTableContentSkeleton;
