import React from "react";
import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
import Tooltip from "@mui/material/Tooltip";
import styles from "./AlarmIndicator.module.css";

/**
 * AlarmIndicator zeigt ein Alarm-Icon, das bei Klick den AlarmLink in neuem Tab öffnet.
 * @param {boolean} hasAlarm - Ob ein Alarm aktiv ist
 * @param {string} alarmLink - Link zur Alarm-Detailseite
 * @param {string} [alarmText] - Optionaler Tooltip-Text
 * @param {string} [animation] - "shake" | "rotate" | "blink" | "pulse" (default: "shake")
 * @param {number} [pulseDuration] - Animationsdauer in Sekunden (default: 0.5)
 */
const AlarmIndicator = ({
  hasAlarm,
  alarmLink,
  alarmText,
  animation = "pulse",
  pulseDuration = 0.5, // default: 1
}) => {
  if (!hasAlarm || !alarmLink) return null;
  // Animation-Klasse wählen
  let animationClass = styles.fastPulse;
  let style = { animationDuration: `${pulseDuration}s` };
  if (animation === "shake") {
    animationClass = styles.shakeAlarm;
  } else if (animation === "rotate") {
    animationClass = styles.rotateAlarm;
  } else if (animation === "blink") {
    animationClass = styles.blinkAlarm;
  } else if (animation === "pulse") {
    animationClass = styles.fastPulse;
  }
  return (
    <Tooltip title={alarmText || "Alarm aktiv"}>
      <span
        style={{ cursor: "pointer", color: "red" }}
        onClick={e => {
          e.stopPropagation();
          window.open(alarmLink, "_blank");
        }}
        aria-label="Alarm aktiv"
      >
        <AlarmIcon
          className={`h-14 w-14 mr-6 ${animationClass} text-red-800 bg-red-300`}
          style={style}
        />
      </span>
    </Tooltip>
  );
};

export default AlarmIndicator;