orario/src/components/Toolbar.jsx

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 Toolbar = ({
    mode,
    setMode,
    source,
    setSource,
    onShowMenu,
    onHelp,
    theme,
    setTheme,
}) => {
    return (
        <div class="toolbar">
            <div class="mobile">
                <button class="flat icon" onClick={onShowMenu}>
                    <Icon name="menu" />
                </button>
            </div>
            <div class="item logo">
                <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
            </div>
            <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: 'Magistrale' },
                            { value: 'tutti', label: 'Tutti' },
                        ]}
                        value={source}
                        setValue={setSource}
                    />
                </div>
            </div>
            <div class="option-group">
                <div class="item option">
                    <CompoundButton
                        options={[
                            { value: MODE_COURSE, label: 'Corsi' },
                            { value: MODE_WORKWEEK, label: 'Settimana' },
                            { value: MODE_WORKWEEK_GRID, label: 'Schema' },
                            { value: MODE_SCHEDULE, label: 'Giorno' },
                        ]}
                        value={mode}
                        setValue={setMode}
                    />
                </div>
                <div class="item option">
                    <button class="icon" onClick={() => window.print()}>
                        <Icon name="print" />
                    </button>
                </div>
                <div class="item option">
                    <button
                        class="icon"
                        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                    >
                        <Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
                    </button>
                </div>
                <div class="item option">
                    <button class="icon" onClick={onHelp}>
                        <Icon name="question_mark" />
                    </button>
                </div>
            </div>
        </div>
    )
}