import { type ReactNode, type HTMLAttributes } from 'react'
import { clsx } from 'clsx'

interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode
  variant?: 'default' | 'dark' | 'neon'
  hover?: boolean
  glow?: boolean
  className?: string
}

export function GlassCard({
  children,
  variant = 'default',
  hover = false,
  glow = false,
  className,
  ...props
}: GlassCardProps) {
  const variantClasses = {
    default: 'glass',
    dark: 'glass-dark',
    neon: 'glass-neon',
  }

  return (
    <div
      className={clsx(
        'rounded-xl p-4',
        variantClasses[variant],
        hover && 'card-hover cursor-pointer',
        glow && 'neon-glow-pulse',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}
