import React, { useState } from "react";
import { Route, Routes } from "react-router-dom";
import Grid from "../components/Grid";
import Header from "../components/Header";
import "../styles/Home.css";

export const CalendarStateContext = React.createContext();

const Calendar = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const date = today.getDate();
  //const day = today.getDay();

  //scope는 day, state는 date
  const [state, setState] = useState({
    scope: "month",
    year: year,
    month: month,
    date: date,
  });

  return (
    <CalendarStateContext.Provider value={[state, setState]}>
      <div className="Calendar">
        <Header />
        <Routes>
          <Route path="/month/*" element={<Grid />} />
          <Route path="/week/*" element={<></>} />
          <Route path="/day/*" element={<></>} />
        </Routes>
      </div>
    </CalendarStateContext.Provider>
  );
};

export default Calendar;