import { memo } from '@wordpress/element';
import Icon from '../../utils/Icon';
import { __ } from '@wordpress/i18n';
import * as Checkbox from '@radix-ui/react-checkbox';

interface CheckboxInputProps {
	label: string;
	value: boolean;
	id: string;
	onChange: ( value: boolean ) => void;
	required?: boolean;
	disabled?: boolean;
}

const CheckboxInput: React.FC< CheckboxInputProps > = ( {
	label,
	value,
	id,
	onChange,
	required,
	disabled,
} ) => {
	return (
		<div className="flex flex-col gap-1">
			<div className="flex items-center gap-2">
				<Checkbox.Root
					className="w-4 h-4 border border-gray-400 bg-white rounded flex-shrink-0 disabled:opacity-50"
					id={ id }
					checked={ !! value }
					aria-label={ label }
					disabled={ disabled }
					onCheckedChange={ ( checked ) => onChange( !! checked ) }
				>
					<Checkbox.Indicator className="flex items-center justify-center">
						<Icon
							name="check"
							size={ 14 }
							color="blue"
							strokeWidth={ 3 }
							tooltip=""
							onClick={ () => {} }
							className=""
						/>
					</Checkbox.Indicator>
				</Checkbox.Root>
				<label
					htmlFor={ id }
					className="font-normal text-md flex items-center gap-1"
				>
					<span className="text-text-gray font-semibold">
						{ label }
					</span>
				</label>
			</div>
		</div>
	);
};

export default memo( CheckboxInput );
