import React, {useEffect, useState} from "react";
import axios from "axios";

const getAcc = async () => {
    const res = await axios.get("/api/watson/corona");
    return res.data.response.body.items.item.decideCnt;
}

const Menu = () => {
    const [acc, setAcc] = useState(0);
    useEffect(() => {
        getAcc().then(data => {
            setAcc(data)
        }).catch(e => {
            console.log("e : ", e);
        })
    }, []);

    return (
      <div className="menu-box">
          <div className="menu-header">
              <div className="pic menu-icon"></div>
              <h2>Quick Link</h2>
          </div>
          <div className="menu-contents">
              <div className="menu-item">
                  <div className="pic bar"></div>
                  <div className="corona-cnt-box">
                      <a href="http://ncov.mohw.go.kr/">
                          <div className="corona-cnt-today">
                              <span> 금일 확진자 수 </span>
                              <span className="cnt"> 541 </span>
                          </div>
                          <div className="corona-cnt-acc">
                              <span> 누적 확진자 수 </span>
                              <span className="cnt">{acc}</span>
                          </div>
                      </a>
                  </div>
              </div>
              <div className="menu-item">
                  <div className="pic call"></div>
                  <a href="tel:+821339">질병 관리청 콜센터 1339</a>
              </div>
              <div className="menu-item">
                  <div className="pic mask"></div>
                  <a href="http://ncov.mohw.go.kr/baroView4.do">코로나 예방 수칙</a>
              </div>
              <div className="menu-item">
                  <div className="pic vaccine"></div>
                  <a href="https://ncv.kdca.go.kr/menu.es?mid=a10117030000">백신 접종 정보</a>
              </div>
          </div>
      </div>
    );
}

export default Menu;