import React from "react";
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import calendar from '../../resources/files/images/calendar.png';

export default function DateDay() {
  const [date, setDate] = React.useState();
  function clock() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    setDate(`${year}년 ${month}월`);
  }


  React.useEffect(() => {
    clock();
  }, []);

  return (
    <div className="weather-info flex-center">
      <ul className="flex-start">
      <ChevronLeftIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
        <li id="fullDate">{date} <img src={calendar} alt="" /></li>
        <ChevronRightIcon sx={{ width: "33px",height:"33px", marginBottom:"0.8rem", color: "#a5a5a5" }}/>
      </ul>
    </div>
  );
}