"use client";

import { ButtonHTMLAttributes, forwardRef } from "react";
import { motion, HTMLMotionProps } from "framer-motion";
import { cn } from "@/lib/cn";

type Variant = "primary" | "secondary" | "ghost" | "danger" | "outline";
type Size = "sm" | "md" | "lg";

interface ButtonProps
  extends Omit<HTMLMotionProps<"button">, "ref">,
    Pick<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
  variant?: Variant;
  size?: Size;
  fullWidth?: boolean;
}

const variantClasses: Record<Variant, string> = {
  primary:
    "bg-gradient-to-br from-gold-bright to-gold-dim text-ink shadow-glow-gold font-semibold",
  secondary:
    "glass text-ink dark:text-paper font-medium",
  ghost:
    "bg-transparent text-ink dark:text-paper font-medium hover:bg-black/5 dark:hover:bg-white/5",
  outline:
    "border border-ink/15 dark:border-white/15 text-ink dark:text-paper font-medium bg-transparent",
  danger:
    "bg-danger/10 text-danger border border-danger/30 font-medium",
};

const sizeClasses: Record<Size, string> = {
  sm: "text-sm px-4 py-2 rounded-2xl gap-1.5",
  md: "text-[15px] px-5 py-3.5 rounded-2xl gap-2",
  lg: "text-base px-6 py-4 rounded-3xl gap-2",
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "primary", size = "md", fullWidth, children, ...props }, ref) => {
    return (
      <motion.button
        ref={ref}
        whileTap={{ scale: 0.96 }}
        whileHover={{ scale: 1.01 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
        className={cn(
          "inline-flex items-center justify-center transition-colors active:brightness-95 disabled:opacity-40 disabled:pointer-events-none",
          variantClasses[variant],
          sizeClasses[size],
          fullWidth && "w-full",
          className
        )}
        {...props}
      >
        {children}
      </motion.button>
    );
  }
);

Button.displayName = "Button";