import React from "react";

export function Button({ variant="primary", className="", ...props }) {
  const base = "inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed";
  const variants = {
    primary: "bg-[#f2f2f2] text-black hover:bg-[#dddddd]",
    ghost: "bg-transparent hover:bg-neutral-100",
    danger: "bg-red-600 text-white hover:bg-red-700",
    outline: "border border-neutral-200 hover:bg-neutral-50",
  };
  return <button className={`${base} ${variants[variant]} ${className}`} {...props} />;
}
