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

import {styles} from './styles';

function DocumentsSk() {
  const {spacing, theme} = useTheme();

  return (
    <Skeleton>
      <View
        style={[
          styles.container,
          {backgroundColor: theme.background.layout.default},
        ]}>
        <Skeleton.Item height={spacing.x3} width="50%" style={styles.title} />
        <FileListSk size={4} withDivider />
        <Skeleton.Item height={spacing.x3} width="30%" style={styles.title} />
        <FileListSk hasFolders withDivider />
      </View>
    </Skeleton>
  );
}

export default DocumentsSk;