"use client";

import Link from "next/link";
import { motion } from "framer-motion";

interface GlowingButtonProps {
  href: string;
  children: React.ReactNode;
  variant?: "primary" | "ghost";
  className?: string;
}

export function GlowingButton({
  href,
  children,
  variant = "primary",
  className = "",
}: GlowingButtonProps) {
  if (variant === "ghost") {
    return (
      <Link
        href={href}
        className={`group inline-flex items-center px-6 py-3 text-sm font-semibold tracking-wide rounded-lg border border-white/[0.1] text-slate-300 hover:text-white hover:border-white/20 hover:bg-white/[0.03] transition-all duration-300 ${className}`}
      >
        {children}
      </Link>
    );
  }

  return (
    <Link href={href} className={`group relative inline-flex ${className}`}>
      {/* Outer glow */}
      <div className="absolute -inset-px rounded-lg bg-gradient-to-r from-accent via-accent-blue to-accent opacity-60 blur-[3px] group-hover:opacity-100 group-hover:blur-[5px] transition-all duration-500" />
      {/* Shimmer sweep */}
      <div className="absolute inset-0 rounded-lg overflow-hidden">
        <div
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          style={{
            background:
              "linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%)",
            backgroundSize: "200% 100%",
            animation: "shimmer 2s linear infinite",
          }}
        />
      </div>
      <motion.span
        className="relative inline-flex items-center px-6 py-3 text-sm font-semibold tracking-wide rounded-lg bg-accent text-navy transition-all duration-300 group-hover:bg-accent/90 group-hover:shadow-[0_0_30px_rgba(0,212,255,0.3)]"
        whileTap={{ scale: 0.97 }}
      >
        {children}
      </motion.span>
    </Link>
  );
}
