import './card-proj-loading.css';
import {Loading3QuartersOutlined} from '@ant-design/icons';
import {IProjLoading} from "../../interfaces/card/ICardProj.ts";
import {useState} from "react";

export default function CardProjLoading(props: IProjLoading) {

    const [duration, setDuration] = useState(props.duration);

    const interval = setInterval(() => {
        if (duration <= 0) {
            clearInterval(interval);
            props.handleCountDownOver();
            return;
        }
        setDuration(duration - 1000);
    }, 1000);

    return (
        <div className="card-proj-loading">
            <div className="title">
                <Loading3QuartersOutlined spin={true} style={{color: '#0052d9'}}/>
                <span className="label">{props.title}</span>
            </div>
            <div className="desc">{props.desc}，预计等待{duration}s</div>
        </div>
    )
}