'use client';

import React from 'react';
import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import { PulseLoader } from 'react-spinners';

function Loading(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <div
      style={{
        height: '60vh',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <PulseLoader color="black" size={20} />
      <div style={{ marginTop: '1rem' }}>{t('loading')}</div>
    </div>
  );
}

export default function FormLoading(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Box
      sx={{
        maxWidth: 'var(--Content-maxWidth)',
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
      }}
    >
      <Loading />
    </Box>
  );
}
