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;
    const day = date.getDate();
    setDate(`${year}년 ${month}월 ${day}일 `);
  }


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

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