import MuiGrid from '@mui/material/Grid';
import DoneRoundedIcon from '@mui/icons-material/DoneRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import type { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
import clsx from 'clsx';
import createClasses from './styles';
import type { CreateClassesProps } from './styles';

type CustomCheckboxProps = MuiCheckboxProps & CreateClassesProps;

const CustomCheckbox = (props: CustomCheckboxProps) => {
  const { checked = false, indeterminate, palette } = props;
  const classes = createClasses({ palette });

  return (
    <MuiGrid
      container
      justifyContent="center"
      alignItems="center"
      className={clsx(
        classes.root,
        checked && classes.checked,
        indeterminate && classes.indeterminate
      )}
    >
      {checked && <DoneRoundedIcon />}
      {indeterminate && <RemoveRoundedIcon />}
    </MuiGrid>
  );
};

export default CustomCheckbox;