'use client'

import Link from 'next/link'
import { ReactNode } from 'react'

interface ServiceButtonProps {
  href: string
  children: ReactNode
  className?: string
}

export default function ServiceButton({ href, children, className = '' }: ServiceButtonProps) {
  const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.currentTarget.style.background = 'rgba(255, 192, 0, 0.15)'
    e.currentTarget.style.borderColor = '#FFC000'
    e.currentTarget.style.boxShadow = '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)'
  }

  const handleMouseLeave = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
    e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)'
    e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 192, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.7)'
  }

  return (
    <Link 
      href={href} 
      className={`service-button rounded-xl p-3 flex flex-col items-center justify-center text-white h-32 md:h-40 transition-all duration-300 hover:transform hover:translate-y-[-5px] ${className}`}
      style={{
        background: 'rgba(255, 255, 255, 0.05)',
        backdropFilter: 'blur(25px)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '1rem',
        boxShadow: '0 0 10px rgba(255, 192, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.7)'
      }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </Link>
  )
}