import { type FC, type ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import { type TitleProps as HuTitleProps } from '@material-hu/components/design-system/Title/types';

export type GenericTitleDescriptionProps = {
  title: string;
  description: string | Array<ReactNode>;
  variantDescription?: HuTitleProps['variant'];
};

const GenericTitleDescription: FC<GenericTitleDescriptionProps> = props => {
  const { title, description, variantDescription = 'M' } = props;
  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <Stack>
        <Typography
          variant="globalXS"
          sx={{
            color: theme => theme.palette.new.text.neutral.lighter,
          }}
        >
          {title}
        </Typography>
        <HuTitle
          variant={variantDescription}
          title={description}
        />
      </Stack>
    </CardContainer>
  );
};

export default GenericTitleDescription;