import {Checkbox as HeadlessCheckbox, Field, Label} from '@headlessui/react';
import './Checkbox.scss';

/**
 * A custom, headless-based Checkbox component.
 * Replaces WordPress CheckboxControl.
 *
 * @param {boolean} checked - The current state.
 * @param {boolean} indeterminate - Whether to show the "some, not all" dash state (e.g. a header "select all" checkbox with a partial selection). Takes visual precedence over `checked`.
 * @param {function} onChange - Callback receiving the new boolean value (true/false).
 * @param {string} label - Optional label text next to the checkbox.
 * @param {boolean} disabled - Whether the checkbox is interactive.
 * @param {string} className - Additional classes.
 */
const Checkbox = ( {
					   checked,
					   indeterminate = false,
					   onChange,
					   label,
					   disabled = false,
					   className = '',
					   variantClass,
					   ...props
				   } ) => {

	const checkIcon = (
		<svg viewBox="0 0 14 14" fill="none" className="adpresso-checkbox-icon">
			<path d="M3.2 6.75L6 9.5L10.6 4.75" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
		</svg>
	);

	const dashIcon = (
		<svg viewBox="0 0 14 14" fill="none" className="adpresso-checkbox-icon">
			<path d="M3 7H11" stroke="currentColor" strokeWidth="2" strokeLinecap="round"></path>
		</svg>
	);

	const checkboxMarkup = (
		<HeadlessCheckbox
			checked={checked}
			indeterminate={indeterminate}
			onChange={onChange}
			disabled={disabled}
			className={`adpresso-checkbox ${className} ${variantClass}`}
			{...props}
		>
			<span className="adpresso-checkbox-check">
                {indeterminate ? dashIcon : checkIcon}
            </span>
		</HeadlessCheckbox>
	);

	if ( label ) {
		return (
			<Field className="adpresso-checkbox-field">
				{checkboxMarkup}
				<Label className="adpresso-checkbox-label">{label}</Label>
			</Field>
		);
	}

	return checkboxMarkup;
};

export default Checkbox;