import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

type RegistrationLayoutProps = {
  title: string;
  children: React.ReactNode;
  sx?: SxProps;
};

const RegistrationLayout = (props: RegistrationLayoutProps) => {
  const { title, children, sx } = props;
  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.default,
        alignItems: 'center',
        pt: { xs: 8, md: 16 },
        pb: 2,
        px: { xs: 2, md: 0 },
        height: '100dvh',
        overflowY: 'auto',
        ...sx,
      }}
    >
      <Stack sx={{ gap: 8, width: { xs: '100%', sm: 435 } }}>
        <HumandLogo
          title="humand logo"
          style={{ height: 30, width: 181 }}
        />
        <Stack sx={{ gap: 5 }}>
          <Typography
            variant="globalXL"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
          {children}
        </Stack>
      </Stack>
    </Stack>
  );
};

export default RegistrationLayout;