/* global React */
const { useState, useEffect, useRef } = React;

/* ---------- Icon (Lucide) ---------- */
function Icon({ name, size = 24, stroke = 1.75, className = "", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, "stroke-width": stroke },
        nameAttr: "data-lucide",
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", ...style }} />;
}

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, style = {} }) {
  return <div className="sl-eyebrow" style={style}>{children}</div>;
}

/* ---------- Button ---------- */
function Button({ children, variant = "mint", icon, onClick, style = {} }) {
  const cls = "sl-btn " + (variant === "dark" ? "sl-btn--dark" : variant === "ghost" ? "sl-btn--ghost" : "");
  return (
    <button className={cls} onClick={onClick} style={style}>
      {children}
      {icon && <Icon name={icon} size={18} />}
    </button>
  );
}

/* ---------- Split section header ---------- */
function SectionHeader({ eyebrow, title, lead, dark = false, bar = true }) {
  return (
    <div className="sl-shead">
      <div>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="sl-shead-title" style={dark ? { color: "#fff" } : {}}>{title}</h2>
      </div>
      <div className="sl-shead-lead" style={dark ? { color: "var(--fg-on-dark-2)" } : {}}>
        {lead}
        {bar && <div className="sl-shead-bar" />}
      </div>
    </div>
  );
}

/* ---------- Slate manifesto quote bar ---------- */
function QuoteBar({ children, align = "center" }) {
  return <div className="sl-quote" style={{ textAlign: align }}>{children}</div>;
}

window.UI = { Icon, Eyebrow, Button, SectionHeader, QuoteBar };