import type { ButtonHTMLAttributes } from "react";
import { cn } from "./cn.js";

export interface CheckerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
  checked: boolean;
  label: string;
  description?: string;
  onChange: (checked: boolean) => void;
}

export function Checker({
  checked,
  label,
  description,
  onChange,
  disabled,
  className,
  type = "button",
  ...props
}: CheckerProps) {
  return (
    <button
      type={type}
      className={cn("nodedc-checker", className)}
      role="checkbox"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => {
        if (!disabled) onChange(!checked);
      }}
      {...props}
    >
      <span className="nodedc-checker__copy">
        <span className="nodedc-checker__label">{label}</span>
        {description ? <span className="nodedc-checker__description">{description}</span> : null}
      </span>
      <span className="nodedc-checker__indicator" aria-hidden="true" />
    </button>
  );
}

