import React from "react";
export function Button({ variant = "primary", size = "md", disabled = false, children, style, ...rest }) {
  const [hover, setHover] = React.useState(false);
  const [down, setDown] = React.useState(false);
  const sizes = { sm: { padding: "7px 14px", fontSize: "11px" }, md: { padding: "10px 20px", fontSize: "12px" }, lg: { padding: "13px 28px", fontSize: "13px" } };
  const variants = {
    primary: { background: "var(--accent)", color: "var(--rr-ink)", border: "1px solid transparent" },
    metal: { background: "var(--accent-metal)", color: "var(--rr-ink)", border: "1px solid transparent" },
    ghost: { background: hover ? "var(--surface-muted)" : "transparent", color: "var(--fg)", border: "1px solid " + (hover ? "var(--hairline)" : "var(--border-strong)") },
    danger: { background: "var(--rr-garnet)", color: "var(--rr-cream)", border: "1px solid transparent" }
  };
  return (
    <button
      disabled={disabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setDown(false); }}
      onMouseDown={() => setDown(true)} onMouseUp={() => setDown(false)}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "8px",
        fontFamily: "var(--font-sans)", fontWeight: 900, letterSpacing: "0.14em", textTransform: "uppercase",
        borderRadius: "var(--radius-xs)", cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.45 : 1,
        filter: hover && !disabled && variant !== "ghost" ? "brightness(1.12)" : "none",
        transform: down && !disabled ? "translateY(1px)" : "none",
        transition: "filter 160ms, transform 80ms, border-color 160ms, background 160ms",
        ...sizes[size], ...variants[variant], ...style
      }}
      {...rest}
    >{children}</button>
  );
}