"use client";

import { ButtonHTMLAttributes, ReactNode, ElementType } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "success" | "danger" | "ghost";
  size?: "sm" | "md" | "lg";
  children: ReactNode;
  as?: ElementType;
}

const variantClasses = {
  primary:
    "border-pixel-gold/50 bg-black/60 text-white hover:bg-pixel-gold/10 hover:border-pixel-gold",
  secondary:
    "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30 hover:border-gray-500",
  success:
    "border-green-500/50 bg-green-900/20 text-green-400 hover:bg-green-900/30",
  danger: "border-red-500/50 bg-red-900/20 text-red-400 hover:bg-red-900/30",
  ghost: "border-transparent bg-transparent text-white hover:text-pixel-gold",
};

const sizeClasses = {
  sm: "px-2 sm:px-3 py-1 text-[10px] sm:text-xs",
  md: "px-4 py-2 text-xs",
  lg: "px-6 py-3 text-sm",
};

export default function Button({
  variant = "primary",
  size = "md",
  className = "",
  disabled,
  children,
  as: Component = "button",
  ...props
}: ButtonProps) {
  return (
    <Component
      className={`border uppercase tracking-widest rounded transition disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
      disabled={disabled}
      {...props}
    >
      {children}
    </Component>
  );
}