/* === Button === */

const Button = ({ variant = "primary", children, onClick, icon, type = "button", style }) => {
  const [hover, setHover] = React.useState(false);

  const base = {
    fontFamily: "var(--font-body)",
    fontWeight: 600,
    fontSize: 13,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    padding: "12px 22px",
    border: "1px solid transparent",
    cursor: "pointer",
    transition: "all 120ms cubic-bezier(0.2,0,0,1)",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    borderRadius: 0,
  };

  const variants = {
    primary: {
      background: hover ? "var(--neon-violet)" : "var(--neon-magenta)",
      borderColor: hover ? "var(--neon-violet)" : "var(--neon-magenta)",
      color: hover ? "#fff" : "#07040E",
      boxShadow: hover ? "var(--glow-violet)" : "var(--glow-magenta-sm)",
    },
    secondary: {
      background: "transparent",
      color: hover ? "var(--neon-cyan)" : "var(--fg-1)",
      borderColor: hover ? "var(--neon-cyan)" : "var(--obsidian-fog)",
      boxShadow: hover ? "inset 0 0 0 1px var(--neon-cyan)" : "none",
    },
    ghost: {
      background: "transparent",
      color: hover ? "var(--neon-magenta)" : "var(--fg-2)",
      borderColor: "transparent",
      padding: "12px 8px",
    },
    danger: {
      background: hover ? "var(--signal-alert)" : "transparent",
      color: hover ? "#07040E" : "var(--signal-alert)",
      borderColor: "var(--signal-alert)",
      boxShadow: hover ? "var(--glow-alert)" : "none",
    },
  };

  return (
    <button
      type={type}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ ...base, ...variants[variant], ...style }}
    >
      {children}
      {icon && <span style={{ fontFamily: "var(--font-mono)" }}>{icon}</span>}
    </button>
  );
};

Object.assign(window, { Button });