import React from "react";

export function RadioGroup({ items = [], value, defaultValue, onValueChange, name, className = "", children, ...props }) {
  const [internal, setInternal] = React.useState(defaultValue);
  const val = value !== undefined ? value : internal;
  const pick = (v) => { if (value === undefined) setInternal(v); if (onValueChange) onValueChange(v); };
  return (
    <div role="radiogroup" className={["o-radio-group", className].filter(Boolean).join(" ")} data-slot="radio-group" {...props}>
      {items.map((item) => (
        <label className="o-choice" key={item.value}>
          <Radio checked={val === item.value} disabled={item.disabled} name={name} onSelect={() => pick(item.value)} />
          {item.label}
        </label>
      ))}
      {children}
    </div>
  );
}

export function Radio({ checked = false, disabled, onSelect, className = "", ...props }) {
  return (
    <button type="button" role="radio" aria-checked={checked} disabled={disabled}
      className={["o-radio", className].filter(Boolean).join(" ")} data-slot="radio" data-checked={checked ? "" : undefined}
      onClick={() => onSelect && onSelect()} {...props}>
      <span className="o-radio__indicator" data-slot="radio-indicator" />
    </button>
  );
}
