"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();
	let diff = Math.max(0, untilDate - now);
	const hours = Math.floor(diff / (1000 * 60 * 60));
	diff -= hours * 1000 * 60 * 60;
	const minutes = Math.floor(diff / (1000 * 60));
	diff -= minutes * 1000 * 60;
	const seconds = Math.floor(diff / 1000);
	return { hours, minutes, seconds };
}

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

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

	return (
		<span className="countdown text-3xl">
			<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>
	);
};