import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interaction from '@fullcalendar/interaction';

import './DaySelector.less';

export default function DaySelector({ eventsList, handleSelect, handleClear }) {
	return (
		<FullCalendar
			plugins={[dayGridPlugin, interaction]}
			events={eventsList}
			// view props
			initialView='dayGridMonth'
			defaultAllDay={true}
			customButtons={{
				resetSelection: { text: 'clear selection', click: handleClear },
			}}
			headerToolbar={{ right: 'resetSelection today prev,next' }}
			// interaction props
			selectable={true}
			longPressDelay={150}
			select={(info) => handleSelect(info)}
		/>
	);
}