import React from 'react';
import {View} from 'react-native';
import {Skeleton} from '@components';
import {useTimeOffPanelStyle} from '@modules/timeOff/hooks';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function MakeRequestSk() {
  const {theme} = useTheme();
  const panelStyle = useTimeOffPanelStyle();

  return (
    <Skeleton
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <View style={panelStyle}>
        <View style={styles.skeletonItemsContainer}>
          <Skeleton.Item height={56} />
          <Skeleton.Item height={56} />
        </View>
      </View>
      <View style={panelStyle}>
        <View style={styles.skeletonItemsContainer}>
          <Skeleton.Item height={56} />
          <Skeleton.Item height={56} />
        </View>
      </View>
    </Skeleton>
  );
}

export default MakeRequestSk;