import { type PropsWithChildren } from 'react';

import { type SxProps } from '@material-hu/mui/styles';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

export type StatCardProps = PropsWithChildren<{
  title: string;
  description?: string;
  fullWidth?: boolean;
  sx?: SxProps;
}>;

const StatCard = ({
  title,
  description,
  children,
  sx = {},
  fullWidth = true,
}: StatCardProps) => {
  return (
    <HuCardContainer
      fullWidth={fullWidth}
      sx={{
        '& .MuiCardContent-root': {
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          gap: 1,
          px: 3,
        },
        ...sx,
      }}
    >
      <HuTitle
        variant="M"
        title={title}
        description={description}
      />
      {children}
    </HuCardContainer>
  );
};

export default StatCard;
