import { type FC, 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: FC<ContainerProps> = props => {
  const { children, ...stackProps } = props;

  return (
    <Stack
      {...stackProps}
      sx={{
        gap: 2,
        p: 2,
        borderRadius: 1,
        width: '100%',
        backgroundColor: '#F8F9FA',
        '& > *': {
          width: '100% !important',
        },
        ...stackProps?.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export type TitleProps = PropsWithChildren<TypographyProps>;

export const Title: FC<TitleProps> = props => {
  const { children, ...typographyProps } = props;

  return (
    <Typography
      variant="subtitle1"
      {...typographyProps}
      sx={{
        width: '100%',
        textAlign: 'left',
        '& > *': {
          width: '100%',
        },
        ...typographyProps?.sx,
      }}
    >
      {children}
    </Typography>
  );
};

export const Layout = {
  Container,
  Title,
};

export default Layout;