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 = () => {
  //scope는 day, state는 date
  const [state, setState] = useState({
    scope: "month",
    date: new 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;