'use client';

import * as React from 'react';
import { Typography } from '@mui/material';
import Box from '@mui/material/Box';
import { useTranslation } from 'react-i18next';

import ErrorDisplay from '@/components/dashboard/error';
import FormLoading from '@/components/loading';

interface PageProps {
  hello: {
    world: string;
  };
}

export default function Page({ hello }: PageProps): React.JSX.Element {
  const { t } = useTranslation();
  const [state, setState] = React.useState<string>(hello.world);

  //
  const [showError, setShowError] = React.useState<boolean>(false);
  const [showLoading, setShowLoading] = React.useState<boolean>(true);

  React.useEffect(() => {
    setShowLoading(false);
    setShowError(false);
    setState('blablabla');
  }, []);

  if (showLoading) return <FormLoading />;

  if (showError)
    return (
      <ErrorDisplay
        message={t('"Unable to process request"')}
        code="500"
        details={t('Detailed error information...')}
      />
    );

  return (
    <Box
      sx={{
        maxWidth: 'var(--Content-maxWidth)',
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
      }}
    >
      <Typography variant="h1">Hello World</Typography>
      {state}
    </Box>
  );
}
