import React from 'react';

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

import { Wrapper } from './styled';

const PdfSkeleton = () => {
  return (
    <Wrapper>
      <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>
    </Wrapper>
  );
};

export default PdfSkeleton;