"use client";

import React from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

interface ShinyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  className?: string;
  href?: string;
  variant?: "primary" | "secondary" | "outline";
  size?: "sm" | "md" | "lg";
  showArrow?: boolean;
}

export function ShinyButton({
  children,
  className = "",
  href,
  variant = "primary",
  size = "md",
  showArrow = false,
  ...props
}: ShinyButtonProps) {
  const sizeClasses = {
    sm: "px-4 py-2 text-xs",
    md: "px-5 py-2.5 text-xs font-mono font-medium tracking-[0.08em] uppercase",
    lg: "px-6 py-3.5 text-sm font-mono font-semibold tracking-[0.1em] uppercase",
  };

  const variantClasses = {
    primary:
      "bg-[#024d37] text-white px-6 py-3.5 shadow-lg shadow-[#024d37]/25 hover:shadow-[#024d37]/45 hover:bg-[#036549] hover:scale-[1.02]",
    secondary:
      "bg-muted text-foreground border border-border px-6 py-3.5 hover:border-[#024d37]/60 hover:text-[#024d37] hover:bg-muted/80",
    outline:
      "border border-[#024d37]/50 text-[#024d37] dark:text-[#33ab76] px-6 py-3.5 hover:bg-[#024d37]/10 hover:border-[#024d37]",
  };

  const baseClasses = `group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full font-mono transition-all duration-300 active:scale-95 ${sizeClasses[size]} ${variantClasses[variant]} ${className}`;

  const content = (
    <>
      <span className="relative z-10 flex items-center gap-2 font-mono">
        {children}
        {showArrow && (
          <ArrowRight className="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-x-1" />
        )}
      </span>
      {/* Light shimmer line effect */}
      <span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-700 ease-in-out group-hover:translate-x-full" />
    </>
  );

  if (href) {
    return (
      <Link href={href} className={baseClasses}>
        {content}
      </Link>
    );
  }

  return (
    <button className={baseClasses} {...props}>
      {content}
    </button>
  );
}