import { CheckBoxCheckSvg, CheckBoxUncheckSvg } from './icons/icons';

const Checkbox = ({ checked = false, onChange, label, size = '26', disabled = false, className = '', labelClassName = '' }) => {
	const handleClick = () => {
		if (!disabled && onChange) {
			onChange(!checked);
		}
	};

	return (
		<div
			className={`custom-checkbox ${disabled ? 'disabled' : ''} ${className}`}
			onClick={handleClick}
			style={{
				display: 'inline-flex',
				alignItems: 'center',
				gap: '8px',
				cursor: disabled ? 'not-allowed' : 'pointer',
				opacity: disabled ? 0.6 : 1,
			}}>
			<div className='custom-checkbox-icon'>{checked ? <CheckBoxCheckSvg size={size} /> : <CheckBoxUncheckSvg size={size} />}</div>
			{label && <span className={labelClassName}>{label}</span>}
		</div>
	);
};

export default Checkbox;