import React from "react";
export function Tabs({ tabs = [], active, defaultActive, onChange, style }) {
  const [inner, setInner] = React.useState(defaultActive !== undefined ? defaultActive : (tabs[0] || ""));
  const current = active !== undefined ? active : inner;
  return (
    <div style={{ display: "flex", gap: "22px", borderBottom: "1px solid var(--border)", fontFamily: "var(--font-sans)", ...style }}>
      {tabs.map((t) => {
        const on = t === current;
        return (
          <button key={t}
            onClick={() => { if (active === undefined) setInner(t); if (onChange) onChange(t); }}
            style={{
              background: "none", border: "none", cursor: "pointer", padding: "8px 2px 10px",
              fontFamily: "var(--font-sans)", fontSize: "12px", fontWeight: 900, letterSpacing: "0.14em", textTransform: "uppercase",
              color: on ? "var(--fg)" : "var(--fg-soft)",
              borderBottom: "2px solid " + (on ? "var(--rr-gold)" : "transparent"),
              marginBottom: "-1px", transition: "color 160ms, border-color 160ms"
            }}
          >{t}</button>
        );
      })}
    </div>
  );
}