import React from 'react';
import {Skeleton} from '@components';

import {styles} from './styles';
import {PerformanceListItemSK} from './PerformanceListItemSK';

interface Props {
  withAvatar?: boolean;
  withDescription?: boolean;
}

export function PerformanceListSK({
  withAvatar = true,
  withDescription = true,
}: Props) {
  return (
    <Skeleton style={styles.container}>
      {Array.from(Array(4).keys()).map(item => (
        <PerformanceListItemSK
          key={item}
          withAvatar={withAvatar}
          withDescription={withDescription}
        />
      ))}
    </Skeleton>
  );
}