import clsx from "clsx";
import * as React from "react";

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "primary" | "secondary" | "ghost" | "danger";
  size?: "sm" | "md";
};

export function Button({ className, variant = "primary", size = "md", ...props }: Props) {
  return (
    <button
      className={clsx(
        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition",
        "disabled:pointer-events-none disabled:opacity-50",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50",
        size === "sm" ? "h-9 px-3 text-sm" : "h-11 px-5 text-sm",
        variant === "primary" &&
          "bg-gradient-to-r from-indigo-600 via-violet-600 to-fuchsia-600 text-white shadow-lg shadow-indigo-500/30 hover:from-indigo-500 hover:via-violet-500 hover:to-fuchsia-500 active:brightness-95",
        variant === "secondary" &&
          "border border-white/60 bg-white/80 text-slate-900 shadow-sm backdrop-blur hover:bg-white active:bg-white/95",
        variant === "ghost" && "text-slate-700 hover:bg-slate-100 active:bg-slate-200",
        variant === "danger" && "bg-rose-600 text-white hover:bg-rose-700 active:bg-rose-800",
        className
      )}
      {...props}
    />
  );
}