'use client'

import React from 'react'
import Link from 'next/link'

interface GlowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children: React.ReactNode
  href?: string
  variant?: 'primary' | 'secondary' | 'outline'
}

const variantClasses = {
  primary:
    'bg-primary text-white border border-primary hover:bg-primary-dark hover:glow-blue active:bg-primary-dark',
  secondary:
    'bg-transparent text-secondary border border-secondary hover:bg-primary/10 hover:glow-cyan',
  outline:
    'bg-transparent text-white border border-primary hover:bg-primary/10 hover:glow-blue',
}

export default function GlowButton({
  children,
  href,
  variant = 'outline',
  className = '',
  ...props
}: GlowButtonProps) {
  const baseClasses = `
    inline-flex items-center justify-center gap-2
    px-6 py-3
    rounded-lg
    transition-all duration-300 ease-out
    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-primary-dark
    disabled:opacity-50 disabled:cursor-not-allowed
    ${variantClasses[variant]}
  `.trim()

  const classes = `${baseClasses} ${className}`.trim()

  if (href) {
    return (
      <Link href={href} className={classes} target="_blank" rel="noopener noreferrer" {...props}>
        {children}
      </Link>
    )
  }

  return (
    <button className={classes} {...props}>
      {children}
    </button>
  )
}