import type { JSX } from 'preact';
import { cn } from './cn';

export type CheckboxProps = JSX.HTMLAttributes<HTMLInputElement> & {
  checked?: boolean;
  label?: string;
};

/**
 * Simple controlled checkbox used across modules.
 * - If you provide `checked`, control it.
 * - Otherwise it behaves as an uncontrolled checkbox.
 */
export function Checkbox({ label, className, ...props }: CheckboxProps) {
  return (
    <label className={cn('ask-flex ask-items-center ask-gap-2 ask-select-none', className)}>
      <input type="checkbox" className="ask-theme-checkbox" {...props} />
      {label ? <span>{label}</span> : null}
    </label>
  );
}
