import React from 'react';
import { SkeletonListItem } from '../ListItem/SkeletonListItem';
import { uuid } from '../../Utils/utils';
import clsx from 'clsx';

export type SkeletonListProps = {
  itemCount: number;
  className?: string;
  ariaLabel?: string;
};

export const SkeletonList = ({ itemCount = 8, className, ariaLabel }: SkeletonListProps) => (
  <ul
    className={clsx(`flex flex-col px-7 my-4 focus-visible:outline-0`, className)}
    aria-label={`${ariaLabel || 'Skeleton loader list'}`}
  >
    {[...Array(itemCount)].map((_item) => {
      return <SkeletonListItem key={uuid()} />;
    })}
  </ul>
);