import { type PropsWithChildren } from 'react';

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

export type ContainerProps = PropsWithChildren<
  StackProps &
    PaperProps & {
      info?: {
        title?: string;
        description?: string;
      };
    }
>;

export const Container = ({
  children,
  info,
  ...stackProps
}: ContainerProps) => {
  return (
    <Stack
      component={Paper}
      elevation={24}
      {...stackProps}
      sx={{
        gap: 3,
        py: 4,
        px: 3,
        borderRadius: '20px',
        '& > *': {
          width: '100%',
        },
        ...stackProps?.sx,
      }}
    >
      {!!info && (
        <Alert color="info">
          <AlertTitle>{info.title}</AlertTitle>
          {info.description}
        </Alert>
      )}
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 3,
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        }}
      >
        {children}
      </Stack>
    </Stack>
  );
};

export type TitleProps = PropsWithChildren<TypographyProps>;

export const Title = ({ children, ...typographyProps }: TitleProps) => {
  return (
    <Typography
      variant="h6"
      {...typographyProps}
    >
      {children}
    </Typography>
  );
};

export type ContentProps = PropsWithChildren<StackProps>;

export const Content = ({ children, ...stackProps }: ContentProps) => {
  return (
    <Stack
      {...stackProps}
      sx={{
        flexDirection: 'column',
        gap: 3,
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: '640px',
        width: '100%',
        ...stackProps.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export const Card = {
  Container,
  Title,
  Content,
};

export default Card;