import { Checkbox, styled } from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';

const SquareIcon = styled('span')(() => ({
  width: '1rem',
  height: '1rem',
  borderRadius: '0.25rem',
  border: '0.1rem solid var(--Stroke, rgba(0, 0, 0, 0.1))',
  backgroundColor: '#fff',
  display: 'block',
  boxSizing: 'border-box',
}));

const StyledCheckbox = styled(Checkbox)(() => ({
  padding: 4,

  '& .MuiSvgIcon-root': {
    width: '1rem',
    height: '1rem',
    borderRadius: '0.25rem',
    border: '0.1rem solid var(--Stroke, rgba(0, 0, 0, 0.1))',
    backgroundColor: '#fff',
    boxSizing: 'border-box',
  },

  '&.Mui-checked .MuiSvgIcon-root': {
    borderColor: '#d5e5d5',
    backgroundColor: '#EDF8F0',
  },

  '&.Mui-checked .MuiSvgIcon-root path': {
    fill: '#258141',
  },

  '& .MuiTouchRipple-root': {
    display: 'none',
  },
}));

export const CustomCheckbox = (props) => {
  return (
    <StyledCheckbox
      icon={<SquareIcon />}
      checkedIcon={<CheckIcon />}
      {...props}
    />
  );
};
