import React from 'react';
import {View} from 'react-native';
import {Divider, Skeleton} from '@components/_HuGo';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  hasFolders?: boolean;
  size?: number;
  withDivider?: boolean;
}

export function FileListSk({hasFolders, size = 10, withDivider}: Props) {
  const {iconSizes, spacing, theme} = useTheme();
  const skeletonArray = new Array(size).fill(null);

  return (
    <Skeleton>
      {skeletonArray.map((_, index) => (
        <View key={index}>
          <View
            style={[
              styles.container,
              {backgroundColor: theme.background.layout.tertiary},
            ]}>
            <Skeleton.Item height={iconSizes.x10} width={iconSizes.x10} />
            <View style={styles.content}>
              <Skeleton.Item height={spacing.x2} width="90%" />
              <Skeleton.Item height={spacing.x2} width="50%" />
            </View>
            <Skeleton.Item height={40} width={hasFolders ? 40 : 80} />
          </View>
          {withDivider && index < size - 1 && <Divider />}
        </View>
      ))}
    </Skeleton>
  );
}
