import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-button", `
  .at-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
    border-radius:var(--radius-sm);border:1px solid var(--border-subtle);
    background:var(--at-white);color:var(--fg-1);font-family:var(--font-sans);
    font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
    transition:border-color .1s,background .1s}
  .at-btn:hover{border-color:var(--at-plum-700)}
  .at-btn:focus-visible{outline:none;box-shadow:var(--ring-accent);border-color:var(--at-flush-600)}
  .at-btn--primary{background:var(--at-flush-600);border-color:var(--at-flush-600);color:#fff}
  .at-btn--primary:hover{background:var(--at-flush-500);border-color:var(--at-flush-500)}
  .at-btn--ghost{background:transparent;border-color:transparent;color:var(--fg-3)}
  .at-btn--ghost:hover{background:var(--at-plum-200);color:var(--fg-1)}
  .at-btn--icon{width:28px;padding:0;justify-content:center}
  .at-btn[disabled]{opacity:.5;cursor:not-allowed}
  .at-btn svg{width:14px;height:14px}
`);

/**
 * Atlas primary action button. Dense (28px), used across topbars, drawers and toolbars.
 */
export function Button({ variant = "default", icon = null, iconOnly = false, children, ...rest }) {
  const cls = [
    "at-btn",
    variant === "primary" ? "at-btn--primary" : "",
    variant === "ghost" ? "at-btn--ghost" : "",
    iconOnly ? "at-btn--icon" : "",
  ].filter(Boolean).join(" ");
  return (
    <button className={cls} {...rest}>
      {icon}
      {!iconOnly && children}
    </button>
  );
}