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

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} />;
};