import React from "react";

export function Toggle({ variant = "default", size = "default", pressed, defaultPressed = false, onPressedChange, className = "", children, ...props }) {
  const [internal, setInternal] = React.useState(defaultPressed);
  const isOn = pressed !== undefined ? pressed : internal;
  const cls = ["o-toggle", variant === "outline" ? "o-toggle--outline" : "", size !== "default" ? "o-toggle--" + size : "", className].filter(Boolean).join(" ");
  return (
    <button type="button" className={cls} data-slot="toggle" data-pressed={isOn ? "" : undefined} aria-pressed={isOn}
      onClick={() => { if (pressed === undefined) setInternal(!isOn); if (onPressedChange) onPressedChange(!isOn); }} {...props}>
      {children}
    </button>
  );
}
