import React from 'react';
import {
  Box,
  SkeletonCircle,
  SkeletonGroup,
  SkeletonLine,
  SkeletonRectangle,
} from '@wix/design-system';

const numberOfCards = 4;

function CardSkeleton({ index }: { index: number }) {
  return (
    <Box
      key={index}
      data-hook="kanban-card-skeleton"
      padding="12px"
      borderRadius="6px"
      backgroundColor="white"
      direction="vertical"
      gap="12px"
      border="1px solid #DFE3EB"
      height="120px"
      marginBottom={index !== numberOfCards - 1 ? '0px' : '12px'}
      boxShadow="0 4px 10px rgba(0, 0, 0, 0.05)"
      marginLeft="12px"
      marginRight="12px"
    >
      <SkeletonGroup skin="light" backgroundColor="white">
        {/* Title and Subtitle Skeletons */}
        <Box direction="vertical" gap="8px" flex="1">
          <SkeletonLine width="162px" />
          <SkeletonLine width="114px" />
        </Box>

        {/* Avatar and Actions Skeleton */}
        <Box alignContent="space-between" marginTop="70px" justifySelf="end">
          <Box verticalAlign="middle" gap="9px">
            <SkeletonCircle diameter="18px" />
            <SkeletonRectangle width="114px" height="18px" />
          </Box>
        </Box>
      </SkeletonGroup>
    </Box>
  );
}

export function CardsSkeleton({ stageKey }: { stageKey: string }) {
  return (
    <Box
      direction="vertical"
      gap="12px"
      dataHook={`kanban-cards-skeleton-${stageKey}`}
    >
      {Array.from({ length: numberOfCards }, (_, index) => (
        <CardSkeleton index={index} key={index} />
      ))}
    </Box>
  );
}