import * as React from "react";
import Typography from "@mui/material/Typography";

// Компонент таймера (упрощённый)
const CountdownTimer = ({targetDate}) => {
    const [timeLeft, setTimeLeft] = React.useState({});

    React.useEffect(() => {
        const updateTimer = () => {
            const now = new Date().getTime();
            const distance = new Date(targetDate).getTime() - now;

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            setTimeLeft({days, hours, minutes, seconds});
        };

        const interval = setInterval(updateTimer, 1000);
        updateTimer();

        return () => clearInterval(interval);
    }, [targetDate]);
    return (
        <Typography variant="h6" color="error" sx={{fontWeight: 'bold'}}>
            До старта: {timeLeft.days}д {timeLeft.hours}ч {timeLeft.minutes}м {timeLeft.seconds}с
        </Typography>
    );
};

export default CountdownTimer;