import { ReactNode } from 'react';

import Stack, { StackProps } from '@material-hu/mui/Stack';
import * as animations from '@material-hu/utils/animations';

import HuTitle from '@material-hu/components/design-system/Title';

type StepLayoutProps = {
  children: ReactNode;
  footer?: ReactNode;
  title?: string;
  description?: string;
  customTitle?: ReactNode;
  sx?: StackProps['sx'];
};

const StepLayout = ({
  children,
  footer,
  title,
  description,
  customTitle,
  sx,
}: StepLayoutProps) => {
  return (
    <Stack sx={{ flex: 1, ...sx }}>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
          flex: 1,
          pt: 5,
          pb: 2,
        }}
      >
        <Stack
          sx={{
            maxWidth: 'md',
            display: 'flex',
            flexDirection: 'column',
            mx: 'auto',
            width: '100%',
            animation: `${animations.fadeIn} 150ms ease-in-out backwards`,
            flex: 1,
            px: 2,
          }}
        >
          <Stack sx={{ mb: 4 }}>
            {customTitle ? (
              customTitle
            ) : (
              <HuTitle
                title={title}
                description={description}
                variant="L"
              />
            )}
          </Stack>
          {children}
        </Stack>
      </Stack>
      <Stack
        sx={{
          flex: 0,
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          alignItems: 'center',
          position: 'sticky',
          bottom: 0,
          py: 2,
          zIndex: 2,
        }}
      >
        <Stack
          sx={{
            display: 'flex',
            maxWidth: 'md',
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'flex-end',
          }}
        >
          {footer}
        </Stack>
      </Stack>
    </Stack>
  );
};

export default StepLayout;