Spotlight

'use client'

import React, { useRef, useState, useEffect } from 'react'
import { motion, useSpring, useMotionValue } from 'motion/react'
import { cn } from '@/lib/utils'

interface SpotlightProps extends React.HTMLAttributes<HTMLDivElement> {
  gradientColor?: string
  gradientSize?: number
  hoverOpacity?: number
}

export function Spotlight({
  children,
  gradientColor = "rgba(255, 255, 255, 0.15)",
  gradientSize = 350,
  hoverOpacity = 1,
  className,
  ...props
}: SpotlightProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const mouseX = useMotionValue(0)
  const mouseY = useMotionValue(0)

  // Use springs for smoother movement
  const springX = useSpring(mouseX, { stiffness: 500, damping: 50 })
  const springY = useSpring(mouseY, { stiffness: 500, damping: 50 })

  const [isHovered, setIsHovered] = useState(false)

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return
    const { left, top } = containerRef.current.getBoundingClientRect()
    mouseX.set(e.clientX - left)
    mouseY.set(e.clientY - top)
  }

  return (
    <div
      ref={containerRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={cn("relative overflow-hidden group", className)}
      {...props}
    >
      <motion.div
        className="pointer-events-none absolute -inset-px transition-opacity duration-300 z-10"
        style={{
          opacity: isHovered ? hoverOpacity : 0,
          background: `radial-gradient(${gradientSize}px circle at ${springX.get()}px ${springY.get()}px, ${gradientColor}, transparent 80%)`,
        }}
        animate={{
            background: `radial-gradient(${gradientSize}px circle at ${springX.get()}px ${springY.get()}px, ${gradientColor}, transparent 80%)`
        }}
      />
      {children}
    </div>
  )
}

'use client'

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

interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string
  description?: string
  gradientColor?: string
}

export function SpotlightCard({
  title,
  description,
  gradientColor,
  className,
  children,
  ...props
}: SpotlightCardProps) {
  return (
    <Spotlight
      gradientColor={gradientColor}
      className={cn(
        "rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-8",
        className
      )}
      {...props}
    >
      <div className="relative z-20 space-y-3">
        {title && (
          <h3 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 italic">
            {title}
          </h3>
        )}
        {description && (
          <p className="text-neutral-500 dark:text-neutral-400 text-sm leading-relaxed">
            {description}
          </p>
        )}
        {children}
      </div>
    </Spotlight>
  );
}