import React from 'react';

import Box from '../Box';
import Skeleton from '../Skeleton';

import { Container } from './styled';

const PdfSkeleton: React.FC = () => (
  <Container>
    <Skeleton variant="rect" width="50%" height="36px" />
    <Skeleton variant="rect" width="45%" height="12px" />
    <Skeleton variant="rect" width="40%" height="12px" />

    <Box mt="30">
      <Skeleton variant="rect" width="100%" height="14px" />
      <Skeleton variant="rect" width="100%" height="14px" />
      <Skeleton variant="rect" width="100%" height="14px" />
      <Skeleton variant="rect" width="90%" height="14px" />
    </Box>

    <Box mt="5" d="flex">
      <Skeleton variant="rect" width="100%" height="120px" />
      <Box ml="15">
        <Skeleton variant="rect" width="70%" height="16px" />
        <Skeleton variant="rect" width="100%" height="12px" />
        <Skeleton variant="rect" width="100%" height="12px" />
        <Skeleton variant="rect" width="100%" height="12px" />
        <Skeleton variant="rect" width="80%" height="12px" />
      </Box>
    </Box>

    <Box mt="15">
      <Skeleton variant="rect" width="100%" height="14px" />
      <Skeleton variant="rect" width="100%" height="14px" />
      <Skeleton variant="rect" width="90%" height="14px" />
      <Skeleton variant="rect" width="85%" height="14px" />
    </Box>
  </Container>
);

export default PdfSkeleton;