'use client'

import { useState } from 'react'

export default function GlassmorphismButton({ 
  children, 
  href = "#",
  className = "" 
}: { 
  children: React.ReactNode, 
  href?: string,
  className?: string 
}) {
  const [isHovered, setIsHovered] = useState(false)
  
  return (
    <a 
      href={href}
      className={`rounded-xl p-3 flex flex-col items-center justify-center text-white min-h-[140px] transition-all duration-300 ${className}`}
      style={{
        background: isHovered ? 'rgba(255, 192, 0, 0.15)' : 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(25px)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '1rem',
        boxShadow: isHovered 
          ? '0 0 20px rgba(255, 192, 0, 0.7), 0 0 30px rgba(255, 192, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.8)'
          : '0 0 10px rgba(255, 192, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.7)',
        transform: isHovered ? 'translateY(-5px)' : 'translateY(0)',
        borderColor: isHovered ? '#FFC000' : 'rgba(255, 255, 255, 0.2)'
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {children}
    </a>
  )
}