/**
 * @Move (SQDP)
 * Only used by the Learning module - move to Learning/
 */
import { FC, PropsWithChildren } from 'react';

import Paper from '@material-hu/mui/Paper';
import Stack, { StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

export type ChartCardProps = PropsWithChildren<
  StackProps & {
    title: string;
    subtitle: string;
  }
>;

export const ChartCard: FC<ChartCardProps> = props => {
  const { title, subtitle, children, ...stackProps } = props;

  const theme = useTheme();

  return (
    <Stack
      {...stackProps}
      component={Paper}
      elevation={24}
      sx={{
        gap: theme.spacing(2),
        p: theme.spacing(2),
        borderRadius: theme.spacing(2),
        width: '100%',
        ...stackProps?.sx,
      }}
    >
      <Typography
        variant="h6"
        sx={{ mb: 'auto' }}
      >
        {title}
      </Typography>
      <Typography
        variant="body2"
        sx={{
          color: theme.palette.text.secondary,
        }}
      >
        {subtitle}
      </Typography>
      {children}
    </Stack>
  );
};

export default ChartCard;