import { type PropsWithChildren } from 'react';

import Stack, { type StackProps } from '@material-hu/mui/Stack';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';

export type ContainerProps = PropsWithChildren<StackProps>;

export const Container = ({ children, ...stackProps }: ContainerProps) => {
  return (
    <Stack
      {...stackProps}
      sx={{
        gap: 3,
        justifyContent: 'center',
        alignItems: 'center',
        p: 3,
        width: '100%',
        '& > *': {
          maxWidth: '900px',
          width: '100%',
        },
        ...stackProps?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export type TitleProps = PropsWithChildren<TypographyProps>;

export const Title = ({ children, ...typographyProps }: TitleProps) => {
  return (
    <Typography
      variant="h5"
      {...typographyProps}
      sx={{
        width: '100%',
        textAlign: 'left',
        ...typographyProps?.sx,
      }}
    >
      {children}
    </Typography>
  );
};

export const Layout = {
  Container,
  Title,
};

export default Layout;