'use client';
import clsx from 'clsx';
import { useEffect, useState, } from 'react';
import { generateUniqueId } from '../../../utils';
import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
/**
 * Checkbox component used for rendering a labeled checkbox with optional helper text and error message.
 *
 * @component
 * @example
 * // Example usage of Checkbox component
 * <Checkbox
 *   label={{ children: 'Accept terms and conditions' }}
 *   checkbox={{ checked: true, onChange: () => console.log('Checkbox clicked') }}
 *   helperText="You must accept the terms and conditions"
 *   error="This field is required"
 * />
 *
 * @param {Object} props - The properties of the Checkbox component.
 * @param {Object} props.label - The properties for the label element, excluding the 'id' attribute.
 * @param {Object} props.checkbox - The properties for the checkbox input element.
 * @param {string} [props.helperText] - Optional helper text to be displayed below the checkbox.
 * @param {string} [props.error] - Optional error message to be displayed below the checkbox.
 *
 * @returns {ReactNode} The rendered Checkbox component.
 */
export function Checkbox({ label, checkbox, helperText, error, }) {
    const [id, setId] = useState('');
    const checkboxClasses = clsx('relative h-4 w-4 cursor-pointer border-2 outline-hidden', error && !checkbox.disabled ? 'accent-error' : 'accent-black', !checkbox.disabled &&
        'hover:before:bg-opacity/15 before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15', checkbox.className);
    const labelProps = {
        htmlFor: id,
        className: clsx('cursor-pointer p-2 text-sm', error ? 'text-error' : 'text-black', checkbox.disabled && 'text-gray-3', label?.className),
    };
    useEffect(() => {
        setId(generateUniqueId());
    }, []);
    return (<div className="w-full max-w-full">
      <div className="flex items-center px-2">
        <input {...checkbox} id={id} type="checkbox" className={checkboxClasses}/>
        <label {...label} {...labelProps}>
          {label.children}
        </label>
      </div>
      <RenderErrorOrHelperText disabled={checkbox.disabled} helperText={helperText} error={error}/>
    </div>);
}
//# sourceMappingURL=Checkbox.jsx.map