import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import { cardContentClasses } from '@mui/material';

import SemiDonutChart from './components/SemiDonutChart';
import { type EnpsTotalProps } from './types';

const EnpsTotal = ({
  title,
  description,
  value,
  nullValueTooltip,
  footer,
  slotProps,
}: EnpsTotalProps) => {
  return (
    <CardContainer
      {...slotProps?.root}
      sx={{
        width: 'fit-content',
        ...slotProps?.root?.sx,
        [`& .${cardContentClasses.root}`]: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'start',
          justifyContent: 'center',
          gap: 2.5,
          width: 360,
        },
      }}
    >
      <Title
        title={title}
        description={description}
        variant="L"
        sx={{}}
      />
      <SemiDonutChart
        value={value}
        nullValueTooltip={nullValueTooltip}
        slotProps={{
          root: {
            sx: { alignSelf: 'center' },
          },
        }}
      />
      {footer}
    </CardContainer>
  );
};

export default EnpsTotal;
