import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { motion, AnimatePresence } from "framer-motion";
import { useAudio } from "../../context/LauncherContext";
interface AchievementToastProps {
message: string | null;
onClose: () => void;
onClick?: () => void;
title?: string;
variant?: "error" | "update" | "steam";
}
export function AchievementToast({
message,
onClose,
onClick,
title,
variant = "error",
}: AchievementToastProps) {
const { t } = useTranslation();
const { playSfx } = useAudio();
const displayTitle = title ?? t("common.error");
const prevMessage = useRef(message);
useEffect(() => {
const wasNull = !prevMessage.current;
const isNull = !message;
prevMessage.current = message;
if (message && wasNull) {
if (variant === "update") {
playSfx("notification.ogg");
} else {
playSfx("in.ogg");
}
}
if (message) {
const timer = setTimeout(() => {
onClose();
}, 8000);
return () => {
clearTimeout(timer);
if (isNull) {
playSfx("out.ogg");
}
};
}
}, [message, onClose, variant, playSfx]);
const getIcon = () => {
if (variant === "update") {
return (
);
}
if (variant === "steam") {
return (
);
}
return (
);
};
return (
{message && (
{
onClick();
onClose();
}
: undefined
}
className={onClick ? "cursor-pointer" : ""}
>
{getIcon()}
{displayTitle}
{message}
)}
);
}