import {View} from 'react-native';
import {CardContainer, Skeleton} from '@components';

import {styles} from './styles';

const ROUNDED_SIZE = 40;

function OvertimeRequestSk() {
  return (
    <CardContainer style={styles.container}>
      <View style={styles.rowContainer}>
        <Skeleton.Item rounded height={ROUNDED_SIZE} width={ROUNDED_SIZE} />
        <View style={styles.titleContainer}>
          <Skeleton.Item height={24} />
          <Skeleton.Item height={12} width="60%" />
        </View>
      </View>
      <Skeleton.Item height={32} />
    </CardContainer>
  );
}

function OvertimeRequestsSk() {
  return (
    <Skeleton style={styles.container}>
      <OvertimeRequestSk />
      <OvertimeRequestSk />
      <OvertimeRequestSk />
      <OvertimeRequestSk />
    </Skeleton>
  );
}

export default OvertimeRequestsSk;