import Link from "next/link";
import { cn } from "@/shared/utils";
import type { ReactNode } from "react";

interface GlowButtonProps {
  href: string;
  children: ReactNode;
  className?: string;
  variant?: "primary" | "secondary";
}

/**
 * Premium button with animated glow effect on hover
 */
export function GlowButton({ href, children, className, variant = "primary" }: GlowButtonProps) {
  if (variant === "secondary") {
    return (
      <Link
        href={href}
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold",
          "border border-border bg-background text-foreground",
          "hover:bg-accent hover:text-accent-foreground",
          "transition-all duration-[var(--cp-duration-normal)]",
          "hover:-translate-y-0.5 active:translate-y-0",
          className
        )}
      >
        {children}
      </Link>
    );
  }

  return (
    <Link href={href} className={cn("relative group", className)}>
      {/* Glow layer */}
      <span
        className={cn(
          "absolute -inset-1 rounded-xl blur-md",
          "bg-gradient-to-r from-primary via-accent-gradient to-primary",
          "opacity-50 group-hover:opacity-80",
          "transition-opacity duration-[var(--cp-duration-slow)]"
        )}
        aria-hidden="true"
      />

      {/* Button */}
      <span
        className={cn(
          "relative inline-flex items-center justify-center gap-2 rounded-lg px-8 py-4 text-lg font-semibold",
          "bg-primary text-primary-foreground",
          "shadow-lg shadow-primary/20",
          "transition-all duration-[var(--cp-duration-normal)]",
          "group-hover:-translate-y-0.5 group-hover:shadow-primary/30",
          "group-active:translate-y-0"
        )}
      >
        {children}
      </span>
    </Link>
  );
}