import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "danger";
}

export function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
  const baseStyles = "inline-flex items-center justify-center px-[18px] py-[10px] rounded-[10px] font-sans font-semibold text-[13px] tracking-tight cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all";
  
  let variantStyles = "";
  switch (variant) {
    case "primary":
      variantStyles = "bg-[var(--p-accent)] text-[var(--p-accent-ink)] hover:brightness-110";
      break;
    case "secondary":
      variantStyles = "bg-[var(--p-chip)] text-[var(--p-text)] border border-[var(--p-border)] hover:bg-[var(--p-border)]";
      break;
    case "danger":
      variantStyles = "bg-red-500 text-white hover:bg-red-600";
      break;
  }

  return (
    <button className={`${baseStyles} ${variantStyles} ${className}`} {...props} />
  );
}
