import React from "react";
import Calendar from "react-calendar";
import './calendar.css';

type TProps = {
    onCLick: (date: string) => void
}

export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
    const months = {
        0: 'Января',
        1: 'Февраля',
        2: 'Марта',
        3: 'Апреля',
        4: 'Мая',
        5: 'Июня',
        6: 'Июля',
        7: 'Августа',
        8: 'Сентября',
        9: 'Октября',
        10: 'Ноября',
        11: 'Декабря'
    }
    return <Calendar 
        showDoubleView={false}
        next2Label={null}
        prev2Label={null}
        view={"month"}
        maxDetail={"month"}
        minDetail={"month"}
        // tileDisabled={(a) => {
        //         return props.disableDays.includes(a.date.getDate())
        // }}
        minDate={new Date()}
        onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months]}`)}
    />
})