'use client';

import { useRef } from 'react';
import { cn } from '@/lib/utils';

interface GlowCardProps {
  children: React.ReactNode;
  className?: string;
  as?: React.ElementType;
}

export function GlowCard({ children, className, as: Tag = 'div' }: GlowCardProps) {
  const ref = useRef<HTMLElement>(null);

  function handleMouseMove(e: React.MouseEvent<HTMLElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    el.style.setProperty('--mouse-x', `${x}%`);
    el.style.setProperty('--mouse-y', `${y}%`);
  }

  return (
    <Tag
      ref={ref}
      onMouseMove={handleMouseMove}
      className={cn(
        'relative overflow-hidden rounded-xl',
        'glass glass-hover glow-card',
        'transition-colors duration-200',
        className
      )}
    >
      {children}
    </Tag>
  );
}
