import type { InputHTMLAttributes, ReactNode } from 'react';
import { useId } from 'react';
import './checkbox.css';

export type CheckboxControlPosition = 'start' | 'end';

export type CheckboxProps = {
  label?: ReactNode;
  /** Position of the checkbox control relative to the label. */
  controlPosition?: CheckboxControlPosition;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;

export function Checkbox({
  label,
  controlPosition = 'start',
  id: idProp,
  className,
  disabled,
  required,
  ...rest
}: CheckboxProps) {
  const uid = useId();
  const id = idProp ?? `ccl-checkbox-${uid.replace(/:/g, '')}`;

  return (
    <label
      className={[
        'ccl-checkbox',
        controlPosition === 'end' ? 'ccl-checkbox--end' : 'ccl-checkbox--start',
        disabled ? 'ccl-checkbox--disabled' : '',
        className ?? '',
      ]
        .filter(Boolean)
        .join(' ')}
      htmlFor={id}
    >
      <input
        id={id}
        type="checkbox"
        disabled={disabled}
        required={required}
        className="ccl-checkbox__control"
        aria-required={required ? true : undefined}
        {...rest}
      />
      {label != null ? (
        <span className="ccl-checkbox__label">
          {label}
          {required ? (
            <span className="ccl-checkbox__required" aria-label="required">
              *
            </span>
          ) : null}
        </span>
      ) : null}
    </label>
  );
}