import { FC } from 'react';

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

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import CardEventSkeleton from './CardEventSkeleton';

const DEFAULT_EVENT_GROUPS = 1;
const DEFAULT_GROUPS_PER_EVENT = 2;

export const EventsSkeleton: FC<{
  eventGroups?: number;
  groupsPerEvent?: number;
}> = ({
  eventGroups = DEFAULT_EVENT_GROUPS,
  groupsPerEvent = DEFAULT_GROUPS_PER_EVENT,
}) => {
  return (
    <Stack sx={{ gap: 2 }}>
      {Array.from({ length: eventGroups }, (_, i) => (
        <Stack
          key={i}
          sx={{
            flexDirection: 'column',
            gap: 2,
            width: '100%',
          }}
        >
          <HuSkeleton
            width={320}
            height={25}
          />
          <Stack sx={{ gap: 1, width: '100%' }}>
            {Array.from({ length: groupsPerEvent }, (__, j) => (
              <CardEventSkeleton key={j} />
            ))}
          </Stack>
        </Stack>
      ))}
    </Stack>
  );
};

export default EventsSkeleton;