import { CompoundButton } from './CompoundButton.jsx'
import { Icon } from './Icon.jsx'

export const OptionBar = ({ view, setView }) => {
    return (
        <div class="option-bar">
            <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: 'Tutti' },
                        ]}
                        value={view}
                        setValue={setView}
                    />
                </div>
                <CompoundButton
                    options={[
                        {
                            value: 'orario',
                            label: <Icon name="calendar_view_month" />,
                            icon: true,
                        },
                        {
                            value: 'lista',
                            label: <Icon name="list" />,
                            icon: true,
                        },
                    ]}
                    value={view}
                    setValue={setView}
                />
            </div>
        </div>
    )
}