ambulance

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8export interface AmbulanceIconHandle {
9  startAnimation: () => void;
10  stopAnimation: () => void;
11}
12 
13interface AmbulanceIconProps extends HTMLAttributes<HTMLDivElement> {
14  size?: number;
15}
16 
17const BODY_VARIANTS: Variants = {
18  normal: { x: 0, y: 0 },
19  animate: {
20    y: [0, -1, 0, -0.5, 0],
21    transition: {
22      duration: 0.4,
23      ease: "easeInOut",
24      repeat: Number.POSITIVE_INFINITY,
25      repeatType: "loop",
26    },
27  },
28};
29 
30const WHEEL_VARIANTS: Variants = {
31  normal: { rotate: 0 },
32  animate: {
33    rotate: 360,
34    transition: {
35      duration: 0.5,
36      ease: "linear",
37      repeat: Number.POSITIVE_INFINITY,
38    },
39  },
40};
41 
42const SPEED_LINE_VARIANTS: Variants = {
43  normal: {
44    opacity: 0,
45    x: 0,
46    scaleX: 0,
47  },
48  animate: (custom: number) => ({
49    opacity: [0, 0.7, 0.5, 0],
50    x: [0, -4, -10, -16],
51    scaleX: [0.2, 1, 0.8, 0.3],
52    transition: {
53      duration: 0.5,
54      ease: "easeOut",
55      repeat: Number.POSITIVE_INFINITY,
56      delay: custom * 0.08,
57      times: [0, 0.2, 0.6, 1],
58    },
59  }),
60};
61 
62const CROSS_VARIANTS: Variants = {
63  normal: { opacity: 1 },
64  animate: {
65    opacity: [1, 0.3, 1],
66    transition: {
67      duration: 0.6,
68      ease: "easeInOut",
69      repeat: Number.POSITIVE_INFINITY,
70    },
71  },
72};
73 
74const AmbulanceIcon = forwardRef<AmbulanceIconHandle, AmbulanceIconProps>(
75  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
76    const controls = useAnimation();
77    const isControlledRef = useRef(false);
78 
79    useImperativeHandle(ref, () => {
80      isControlledRef.current = true;
81 
82      return {
83        startAnimation: () => controls.start("animate"),
84        stopAnimation: () => controls.start("normal"),
85      };
86    });
87 
88    const handleMouseEnter = useCallback(
89      (e: React.MouseEvent<HTMLDivElement>) => {
90        if (!isControlledRef.current) {
91          controls.start("animate");
92        }
93        onMouseEnter?.(e);
94      },
95      [controls, onMouseEnter]
96    );
97 
98    const handleMouseLeave = useCallback(
99      (e: React.MouseEvent<HTMLDivElement>) => {
100        if (!isControlledRef.current) {
101          controls.start("normal");
102        }
103        onMouseLeave?.(e);
104      },
105      [controls, onMouseLeave]
106    );
107 
108    return (
109      <div
110// … truncated