import React from 'react';
import { useTranslation } from 'react-i18next';

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

import { Container, Text } from './styled';

const PdfSkeleton: React.SFC = () => {
  const { t } = useTranslation('toast');
  return (
    <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>
      <Text>{t('processing')}</Text>
    </Container>
  );
};

export default PdfSkeleton;