import { clsx } from '@admin/utils';
import { HiddenInputLabel } from './HiddenInputLabel';

export function Checkbox( { checked, onChange, label, disabled } ) {
	return (
		<HiddenInputLabel
			type="checkbox"
			checked={ checked }
			disabled={ disabled }
			onChange={ ( e ) => onChange( e.target.checked ) }
			labelClassName="flex items-start gap-2 text-sm text-gray-700"
		>
			<span
				aria-hidden="true"
				className={ clsx(
					'mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors',
					checked
						? 'border-primary bg-primary'
						: 'border-gray-400 bg-white'
				) }
			>
				{ checked && (
					<svg width="10" height="8" viewBox="0 0 10 8" fill="none">
						<path
							d="M1 4L3.5 6.5L9 1"
							stroke="white"
							strokeWidth="1.6"
							strokeLinecap="round"
							strokeLinejoin="round"
						/>
					</svg>
				) }
			</span>
			{ label }
		</HiddenInputLabel>
	);
}