"use client";
import { useEffect, useState } from "react";

export const Maintenance = ({ message }: { message?: string }) => {
	const [rotationSpeed, setRotationSpeed] = useState(0);
	const [rotationDeg, setRotationDeg] = useState(0);

	useEffect(() => {
		const interval = setInterval(() => {
			setRotationDeg(rotationDeg + rotationSpeed);
		});

		return () => {
			clearInterval(interval);
		};
	}, [rotationDeg, rotationSpeed]);

	return (
		<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[10px] min-h-0 bg-base-300 shadow-lg p-8">
			<h1 className="text-4xl font-bold text-center">Wartungsarbeiten</h1>
			<p className="text-base text-center mx-6">
				{message || "Unsere Website wird derzeit gewartet. Bitte versuchen Sie es später erneut."}
			</p>
			<div className="flex flex-col items-center gap-6 mt-6">
				<img
					src={`${process.env.NEXT_PUBLIC_HUB_URL}/logo.png`}
					width={150}
					alt="logo"
					style={{
						transform: `rotate(${rotationDeg}deg)`,
						cursor: "pointer",
						boxShadow: `0 0 ${rotationSpeed * 20}px rgba(255, 0, 0, ${rotationSpeed - 0})`,
						borderRadius: "50%",
					}}
					onClick={() => {
						setRotationSpeed(rotationSpeed + 0.1);
					}}
					onContextMenu={(e) => {
						e.preventDefault();
						setRotationSpeed(Math.max(rotationSpeed - 0.1, 0));
					}}
				/>
			</div>
		</div>
	);
};