import {ReactNode} from 'react';
import {CardContainer, ListItemSkeleton, Skeleton} from '@components';

import {styles} from './styles';

interface Props {
  HeaderComponent: ReactNode;
}

export function NotificationChannelsSK({HeaderComponent}: Props) {
  return (
    <Skeleton style={styles.container}>
      {HeaderComponent}
      {Array.from(Array(2).keys()).map(item => (
        <CardContainer key={item}>
          <ListItemSkeleton withDescription style={styles.item} />
        </CardContainer>
      ))}
    </Skeleton>
  );
}