"use client";

import { type ButtonHTMLAttributes, forwardRef } from "react";
import { cn } from "@/lib/utils";

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

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  shimmer?: boolean;
  as?: "button";
}

const variants: Record<Variant, string> = {
  primary:
    "bg-[var(--color-moy-gold)] text-[var(--color-moy-dark)] hover:bg-[var(--color-moy-gold-light)] font-bold shadow-[var(--shadow-gold)] hover:shadow-[var(--shadow-gold-lg)]",
  secondary:
    "border border-[var(--color-moy-gold)] text-[var(--color-moy-gold)] hover:bg-[var(--color-moy-gold)] hover:text-[var(--color-moy-dark)] font-medium",
  ghost:
    "text-[var(--color-moy-gold)] hover:bg-[var(--color-moy-gold-faint)] font-medium",
  "outline-light":
    "border border-white/50 text-white hover:border-white hover:bg-white/10 font-medium",
};

const sizes: Record<Size, string> = {
  sm: "px-5 py-2 text-[11px] tracking-[0.15em]",
  md: "px-8 py-3.5 text-[11px] tracking-[0.18em]",
  lg: "px-10 py-4 text-[11px] tracking-[0.2em]",
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "primary", size = "md", shimmer = false, children, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        "relative inline-flex items-center justify-center uppercase overflow-hidden",
        "transition-all duration-300",
        variants[variant],
        sizes[size],
        className
      )}
      {...props}
    >
      {shimmer && (
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 moy-shimmer opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        />
      )}
      <span className="relative">{children}</span>
    </button>
  )
);
Button.displayName = "Button";