import { type ComponentProps } from 'react';
import { Helmet } from 'react-helmet-async';

import Stack from '@material-hu/mui/Stack';

import TaskFocusLayout from '@material-hu/components/composed-components/TaskFocusLayout';
import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

type PerformanceReviewLoadingProps = {
  pageTitle: string;
  onClose: () => void;
};

const PerformanceReviewLoading = ({
  pageTitle,
  onClose,
}: PerformanceReviewLoadingProps) => (
  <>
    <Helmet>
      <title>{pageTitle}</title>
    </Helmet>
    <TaskFocusLayout
      slotProps={
        {
          root: {
            sx: {
              height: '100%',
              minHeight: '100%',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
              backgroundColor: 'new.background.layout.default',
            },
          },
          header: {
            title: '',
            loading: true,
            onClose,
          },
        } as ComponentProps<typeof TaskFocusLayout>['slotProps']
      }
    >
      <Stack
        sx={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: 240,
        }}
      >
        <HuSpinner />
      </Stack>
    </TaskFocusLayout>
  </>
);

export default PerformanceReviewLoading;
