"use client";

import { cn } from "@/lib/cn";
import { ArrowUpRight } from "lucide-react";
import type { ComponentPropsWithoutRef } from "react";

type Variant = "primary" | "ghost" | "outline";

type Props = ComponentPropsWithoutRef<"a"> & {
  variant?: Variant;
  arrow?: boolean;
};

const base =
  "relative inline-flex items-center gap-2 rounded-full px-7 py-3.5 text-sm font-medium tracking-wide transition-all duration-500";

const variants: Record<Variant, string> = {
  primary:
    "bg-gradient-to-r from-gold-light via-gold to-gold-deep text-obsidian shadow-[0_10px_40px_-12px_rgba(212,164,55,0.6)] hover:shadow-[0_18px_50px_-12px_rgba(242,194,91,0.8)]",
  outline:
    "border border-bone/20 text-bone hover:border-gold/60 hover:text-gold-light",
  ghost: "text-bone hover:text-gold-light",
};

export function PremiumButton({
  variant = "primary",
  className,
  children,
  arrow = true,
  ...rest
}: Props) {
  return (
    <a className={cn(base, variants[variant], className)} {...rest}>
      <span>{children}</span>
      {arrow ? (
        <ArrowUpRight className="size-4 transition-transform duration-500 group-hover:translate-x-0.5" />
      ) : null}
    </a>
  );
}