import Header from "./components/Header";
import DayButton from "./components/DayButton";

const colors = [
  "#fbf8cc",
  "#fde4cf",
  "#ffcfd2",
  "#f1c0e8",
  "#cfbaf0",
  "#a3c4f3",
  "#90dbf4",
  "#8eecf5",
  "#98f5e1",
  "#b9fbc0",
];

const App: React.FC = () => {
  const date = new Date();
  const minDate = new Date(new Date(date).setMonth(date.getMonth() - 3));
  const maxDate = new Date(new Date(date).setMonth(date.getMonth() + 1));
  return <Calendar
          dayComponent={(props) => (
            <Day 
              {...props} 
              colors={colors} 
              dayComponent={DayButton}
            />
          )}
          headerComponent={Header}
          minDate={minDate}
          maxDate={maxDate}
        />;
}