Bulb Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { Lightbulb } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface BulbIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isLit?: boolean;
13  startOnHover?: boolean;
14  animationType?: 'pulse' | 'flash';
15}
16 
17export function BulbIcon({
18  className,
19  color = 'currentColor',
20  size = 24,
21  isLit = false,
22  startOnHover = true,
23  animationType = 'pulse',
24}: BulbIconProps) {
25  const controls = useAnimation();
26  const [isHovered, setIsHovered] = useState(false);
27  const shouldAnimate = isLit || (startOnHover && isHovered);
28 
29  useEffect(() => {
30    if (shouldAnimate) {
31      if (animationType === 'pulse') {
32        controls.start({
33          scale: [1, 1.1, 1],
34          opacity: [1, 0.8, 1],
35          transition: {
36            duration: 1.5,
37            repeat: Infinity,
38            repeatType: 'loop',
39            ease: 'easeInOut',
40          },
41        });
42      } else if (animationType === 'flash') {
43        controls.start({
44          opacity: [1, 0.2, 1],
45          transition: {
46            duration: 0.5,
47            repeat: Infinity,
48            repeatType: 'reverse',
49            ease: 'linear',
50          },
51        });
52      }
53    } else {
54      controls.stop();
55      controls.set({ scale: 1, opacity: 1 });
56    }
57  }, [shouldAnimate, animationType, controls]);
58 
59  return (
60    <div
61      className={cn(
62        'relative flex cursor-pointer items-center justify-center select-none',
63        className
64      )}
65      onMouseEnter={() => setIsHovered(true)}
66      onMouseLeave={() => setIsHovered(false)}
67    >
68      {shouldAnimate && (
69        <motion.div
70          initial={{ opacity: 0, scale: 0.8 }}
71          animate={{ opacity: 0.4, scale: 1.5 }}
72          className={cn(
73            'absolute rounded-full blur-md',
74            animationType === 'pulse' ? 'bg-yellow-400/50' : 'bg-red-500/30'
75          )}
76          style={{ width: size, height: size }}
77        />
78      )}
79      <motion.div animate={controls} className='relative z-10'>
80        <Lightbulb
81          size={size}
82          color={
83            shouldAnimate
84              ? animationType === 'pulse'
85                ? '#eab308'
86                : color
87              : color
88          }
89          className={cn(
90            shouldAnimate &&
91              animationType === 'pulse' &&
92              'fill-yellow-400 text-yellow-500'
93          )}
94        />
95// … truncated