'use client'

import React from 'react'
import { cn } from '@/lib/utils'

interface GlitchButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode
  variant?: 'default' | 'subtle'
  glitchColor?: 'cyan' | 'pink' | 'purple' | 'magenta'
  disabled?: boolean
}

export function GlitchButton({
  children,
  variant = 'default',
  glitchColor = 'cyan',
  disabled = false,
  className,
  ...props
}: GlitchButtonProps) {
  const glitchClasses = !disabled
    ? cn('glitch-btn-cyber', variant === 'subtle' && 'glitch-btn-subtle', 'relative')
    : ''

  const overlayColorClass = {
    cyan: '',
    pink: 'glitch-overlay-pink',
    purple: 'glitch-overlay-purple',
    magenta: 'glitch-overlay-magenta',
  }[glitchColor]

  return (
    <button className={cn(glitchClasses, className)} disabled={disabled} {...props}>
      {children}

      {!disabled && (
        <div className={cn('glitch-overlay', overlayColorClass)} aria-hidden="true">
          {children}
        </div>
      )}
    </button>
  )
}