import React from "react";

export function Checkbox({ checked, defaultChecked = false, indeterminate = false, onCheckedChange, disabled, className = "", ...props }) {
  const [internal, setInternal] = React.useState(defaultChecked);
  const isOn = checked !== undefined ? checked : internal;
  return (
    <button type="button" role="checkbox" aria-checked={indeterminate ? "mixed" : isOn} disabled={disabled}
      className={["o-check", className].filter(Boolean).join(" ")} data-slot="checkbox"
      data-checked={isOn && !indeterminate ? "" : undefined} data-indeterminate={indeterminate ? "" : undefined}
      onClick={() => { if (checked === undefined) setInternal(!isOn); if (onCheckedChange) onCheckedChange(!isOn); }} {...props}>
      <span className="o-check__indicator" data-slot="checkbox-indicator">
        {indeterminate
          ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5.252 12h13.496" /></svg>
          : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5.252 12.7 10.2 18.63 18.748 5.37" /></svg>}
      </span>
    </button>
  );
}
