import React, {ReactNode, useState} from 'react';
import dayjs from "dayjs";
import locale from "dayjs/locale/el";
import CalendarMonth from "./CalendarMonth";


type CalendarTrialsProps = {
    children?: ReactNode
}

const CalendarTrials = ({children}: CalendarTrialsProps) => {

    const now = dayjs().locale({
        ...locale,
    });


    const [year, setYear] = useState(now)
    const firstMonth = now.month(0)


    return (
        <div>
            <h1>Calendar Trials - {year.year()}</h1>

            <div className="row">

                {
                    new Array(12).fill(null).map((_, i) =>
                        <div className="col-6 col-xxl-4" key={'month'+i}>
                            <CalendarMonth month={firstMonth.add(i, 'month')} showExtra={false}/>
                        </div>
                    )
                }

            </div>
        </div>
    );
}

export default CalendarTrials;