import { CompoundButton } from './CompoundButton.jsx'
import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx'
import { Icon } from './Icon.jsx'

export const Optionbar = ({ mode, setMode, source, setSource, onHelp }) => {
	return (
		<div class="optionbar">
			<div class="option-group">
				<div class="item option">
					<CompoundButton
						options={[
							{ value: 'anno-1', label: 'I' },
							{ value: 'anno-2', label: 'II' },
							{ value: 'anno-3', label: 'III' },
							{ value: 'magistrale', label: 'M' },
							{ value: 'tutti', label: <Icon name="apps" /> },
						]}
						value={source}
						setValue={setSource}
					/>
				</div>
			</div>
			<div class="option-group">
				<div class="item option">
					<CompoundButton
						options={[
							{ value: MODE_COURSE, label: <Icon name="list" /> },
							{
								value: MODE_WORKWEEK_GRID,
								label: <Icon name="calendar_view_month" />,
							},
							{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
						]}
						value={mode}
						setValue={setMode}
					/>
				</div>
			</div>
		</div>
	)
}