Truck Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { Truck } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface TruckIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isAnimating?: boolean;
13  startOnHover?: boolean;
14  animationType?: 'drive' | 'bounce';
15}
16 
17export function TruckIcon({
18  className,
19  color = 'currentColor',
20  size = 24,
21  isAnimating = false,
22  startOnHover = true,
23  animationType = 'drive',
24}: TruckIconProps) {
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 === 'drive') {
32        controls.start({
33          x: [0, 3, -3, 0],
34          transition: {
35            duration: 0.5,
36            repeat: Infinity,
37            repeatType: 'loop',
38            ease: 'easeInOut',
39            repeatDelay: 0.5,
40          },
41        });
42      } else if (animationType === 'bounce') {
43        controls.start({
44          y: [0, -2, 0, -1, 0],
45          transition: {
46            duration: 0.5,
47            repeat: Infinity,
48            repeatType: 'loop',
49            ease: 'easeInOut',
50            repeatDelay: 0.2,
51          },
52        });
53      }
54    } else {
55      controls.stop();
56      controls.set({ x: 0, y: 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 animate={controls}>
70        <Truck size={size} color={color} />
71      </motion.div>
72    </div>
73  );
74}