import { ReactNode } from 'react';

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

const StepLayout = ({
  children,
  footer,
  sx,
}: {
  children: ReactNode;
  footer?: ReactNode;
  sx?: StackProps['sx'];
}) => {
  return (
    <Stack sx={sx}>
      <Stack
        sx={{
          backgroundColor: theme => theme.palette.new.background.layout.default,
          flex: 1,
          pt: 5,
          pb: 2,
        }}
      >
        <Stack
          sx={{
            maxWidth: 'md',
            display: 'flex',
            flexDirection: 'column',
            mx: 'auto',
            width: '100%',
            animation: `${fadeIn} 150ms ease-in-out backwards`,
            flex: 1,
          }}
        >
          {children}
        </Stack>
      </Stack>
      <Stack
        sx={{
          flex: 0,
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          alignItems: 'center',
          position: 'sticky',
          bottom: 0,
          py: 2,
        }}
      >
        <Stack
          sx={{
            display: 'flex',
            maxWidth: 'md',
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'flex-end',
            gap: 1.5,
            px: 2,
          }}
        >
          {footer}
        </Stack>
      </Stack>
    </Stack>
  );
};

export default StepLayout;