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

interface PenaltyCountdownProps {
	until: string | Date;
}

function getTimeLeft(until: string | Date) {
	const untilDate = new Date(until).getTime();
	const now = Date.now();
	const diff = Math.max(0, untilDate - now);
	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
	const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((diff % (1000 * 60)) / 1000);
	return { days, hours, minutes, seconds };
}

export const PenaltyCountdown: React.FC<PenaltyCountdownProps> = ({ until }) => {
	const [timeLeft, setTimeLeft] = useState(() => getTimeLeft(until));
	const [mounted, setMounted] = useState(false);

	useEffect(() => {
		setMounted(true);
	}, []);

	useEffect(() => {
		if (!mounted) return;
		const interval = setInterval(() => {
			setTimeLeft(getTimeLeft(until));
		}, 1000);
		return () => clearInterval(interval);
	}, [until, mounted]);

	if (!mounted) return null;

	return (
		<span className="countdown text-3xl">
			{timeLeft.days > 0 && timeLeft.days + "d"}
			<span style={{ "--value": timeLeft.hours } as React.CSSProperties} aria-live="polite">
				{timeLeft.hours}
			</span>
			h
			<span style={{ "--value": timeLeft.minutes } as React.CSSProperties} aria-live="polite">
				{timeLeft.minutes}
			</span>
			m
			<span style={{ "--value": timeLeft.seconds } as React.CSSProperties} aria-live="polite">
				{timeLeft.seconds}
			</span>
			s
		</span>
	);
};