"use client";

import type { CSSProperties, MouseEvent, ReactNode } from "react";

interface SpotlightCardProps {
	children: ReactNode;
	className?: string;
	style?: CSSProperties;
}

/**
 * Wraps a card with a mouse-tracking radial glow. The pointer position is
 * written to `--spot-x` / `--spot-y` and consumed by the `.spotlight::before`
 * overlay in globals.css.
 */
export function SpotlightCard({
	children,
	className,
	style,
}: SpotlightCardProps) {
	const handlePointerMove = (event: MouseEvent<HTMLDivElement>) => {
		const el = event.currentTarget;
		const rect = el.getBoundingClientRect();
		el.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
		el.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
	};

	return (
		<div
			className={className}
			style={
				{ "--spot-x": "50%", "--spot-y": "50%", ...style } as CSSProperties
			}
			onPointerMove={handlePointerMove}
		>
			{children}
		</div>
	);
}