Clock Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { Clock } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface ClockIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isAnimating?: boolean;
13  startOnHover?: boolean;
14  animationType?: 'swing' | 'shake';
15}
16 
17export function ClockIcon({
18  className,
19  color = 'currentColor',
20  size = 24,
21  isAnimating = false,
22  startOnHover = true,
23  animationType = 'swing',
24}: ClockIconProps) {
25  const controls = useAnimation();
26  const [isHovered, setIsHovered] = useState(false);
27  const shouldAnimate = isAnimating || (startOnHover && isHovered);
28 
29  useEffect(() => {
30    if (shouldAnimate) {
31      if (animationType === 'swing') {
32        controls.start({
33          rotate: [0, 15, -15, 10, -10, 0],
34          transition: {
35            duration: 1.5,
36            repeat: Infinity,
37            repeatType: 'loop',
38            ease: 'easeInOut',
39            repeatDelay: 0.5,
40          },
41        });
42      } else if (animationType === 'shake') {
43        controls.start({
44          x: [0, -2, 2, -2, 2, 0],
45          transition: {
46            duration: 0.2,
47            repeat: Infinity,
48            repeatType: 'loop',
49            ease: 'linear',
50            repeatDelay: 0.8,
51          },
52        });
53      }
54    } else {
55      controls.stop();
56      controls.set({ rotate: 0, x: 0 });
57    }
58  }, [shouldAnimate, animationType, controls]);
59 
60  return (
61    <div
62      className={cn(
63        'relative flex cursor-pointer items-center justify-center select-none',
64        className
65      )}
66      onMouseEnter={() => setIsHovered(true)}
67      onMouseLeave={() => setIsHovered(false)}
68    >
69      <motion.div
70        animate={controls}
71        style={{ originY: animationType === 'swing' ? 0.2 : 0.5 }}
72      >
73        <Clock size={size} color={color} />
74      </motion.div>
75    </div>
76  );
77}