import { Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';
import React from 'react';
// @ts-expect-error
import styles from './StagesSkeleton.scss';

const numberOfStages = 6;

function StageSkeleton({ index }: { index: number }) {
  return (
    <Box
      key={index}
      width="270px"
      dataHook="kanban-stage-skeleton"
      backgroundColor="#E5E6E9"
      borderRadius="8px"
      padding="12px"
      direction="vertical"
      height="calc(100vh - 300px)"
    >
      <Box width="246px">
        <SkeletonGroup skin="dark" backgroundColor="#E5E6E9">
          <Box direction="vertical" gap="12px">
            <SkeletonLine
              className={styles.skeletonLine}
              width="185px"
              marginBottom="5px"
            />
            <SkeletonLine className={styles.skeletonLine} width="104px" />
          </Box>
        </SkeletonGroup>
      </Box>
    </Box>
  );
}

export function StagesSkeleton() {
  return (
    <Box direction="horizontal" gap="12px" dataHook="kanban-stages-skeleton">
      {Array.from({ length: numberOfStages }, (_, index) => (
        <StageSkeleton index={index} key={index} />
      ))}
    </Box>
  );
}