Production-ready Button component

import type { ButtonHTMLAttributes } from "react";

type Variant = "primary" | "secondary" | "ghost";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
}

export function Button({ variant = "primary", ...props }: ButtonProps) {
  const styles = {
    primary: { background: "oklch(0.65 0.18 170)", color: "#fff", border: "none" },
    secondary: { background: "transparent", border: "1px solid #333", color: "#fff" },
    ghost: { background: "transparent", border: "none", color: "#888" },
  };

  return (
    <button
      style={{
        padding: "9px 16px", borderRadius: "8px",
        fontSize: "14px", fontWeight: 500, cursor: "pointer",
        ...styles[variant],
      }}
      {...props}
    />
  );
}