import { motion } from "framer-motion";
import { cn } from "../../lib/utils";

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

export function Button({ children, variant = "primary", loading, className, ...props }: Props) {
  const base = "px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 disabled:opacity-50";
  const variants = {
    primary: "bg-gradient-to-r from-accent to-accent2 text-white hover:scale-[1.02] active:scale-[0.98]",
    secondary: "border border-white/20 text-white hover:bg-white/10",
    danger: "border border-red-500/40 text-red-400 hover:bg-red-500/10",
  };
  return (
    <motion.button
      whileTap={{ scale: 0.97 }}
      className={cn(base, variants[variant], className)}
      disabled={loading || props.disabled}
      {...(props as any)}
    >
      {loading ? "..." : children}
    </motion.button>
  );
}