import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

const TasksTableRowSkeleton = () =>
  Array.from({ length: 5 }, (_, index) => (
    <HuTableRow key={index}>
      {/* number */}
      <HuTableCell colSpan={2}>
        <HuSkeleton
          width={80}
          height={25}
        />
      </HuTableCell>
      {/* task */}
      <HuTableCell colSpan={6}>
        <HuSkeleton
          width={200}
          height={25}
        />
      </HuTableCell>
      {/* request */}
      <HuTableCell colSpan={5}>
        <Stack sx={{ gap: 1 }}>
          <HuSkeleton
            width={200}
            height={20}
          />
          <HuSkeleton
            width={80}
            height={12}
          />
        </Stack>
      </HuTableCell>
      {/* requester */}
      <HuTableCell colSpan={4}>
        <HuSkeleton
          width={150}
          height={20}
        />
      </HuTableCell>
      {/* status */}
      <HuTableCell colSpan={3}>
        <HuSkeleton
          width={100}
          height={32}
        />
      </HuTableCell>
      {/* agent */}
      <HuTableCell colSpan={5}>
        <HuSkeleton
          width={150}
          height={20}
        />
      </HuTableCell>
      {/* request_date */}
      <HuTableCell colSpan={4}>
        <HuSkeleton
          width={100}
          height={20}
        />
      </HuTableCell>
      {/* updated_at */}
      <HuTableCell colSpan={4}>
        <HuSkeleton
          width={100}
          height={20}
        />
      </HuTableCell>
    </HuTableRow>
  ));

export default TasksTableRowSkeleton;
