'use client';

import { useRef, type ReactNode } from 'react';

// Adapted from React Bits' SpotlightCard (reactbits.dev, MIT) — a soft glow
// that follows the cursor, recoloured to the brand's dorado instead of the
// original's plain white. Pure CSS custom properties + a `before:` pseudo
// element, so no separate stylesheet is needed.
export function TarjetaSpotlight({
  children,
  className = '',
  spotlightColor = 'rgba(196, 148, 46, 0.16)', // dorado, low alpha
}: {
  children: ReactNode;
  className?: string;
  spotlightColor?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty('--spot-x', `${e.clientX - rect.left}px`);
    el.style.setProperty('--spot-y', `${e.clientY - rect.top}px`);
  };

  return (
    <div
      ref={ref}
      onMouseMove={handleMouseMove}
      style={{ ['--spot-color' as string]: spotlightColor }}
      className={`group relative overflow-hidden
        before:absolute before:inset-0 before:pointer-events-none before:opacity-0 before:transition-opacity before:duration-500
        before:[background:radial-gradient(circle_at_var(--spot-x,50%)_var(--spot-y,50%),var(--spot-color),transparent_70%)]
        hover:before:opacity-100 focus-within:before:opacity-100 motion-reduce:before:hidden
        ${className}`}
    >
      {children}
    </div>
  );
}