import React, {memo, useMemo} from 'react';
import {View} from 'react-native';
import {Skeleton} from '@components';

import {styles} from './styles';

interface Props {
  withAvatar?: boolean;
}

const getSkeletons = (withAvatar: boolean) =>
  Array.from(Array(20).keys()).map((_, index) => (
    <View key={index} style={styles.rowContainer}>
      <Skeleton.Item height={24} width={24} />
      {withAvatar && <Skeleton.Item rounded height={40} width={40} />}
      <Skeleton.Item height={32} width={withAvatar ? '75%' : '90%'} />
    </View>
  ));

function CheckboxListSk({withAvatar = false}: Props) {
  const skeletons = useMemo(() => getSkeletons(withAvatar), [withAvatar]);
  return <Skeleton style={styles.container}>{skeletons}</Skeleton>;
}

export default memo(CheckboxListSk);