import React, { useContext } from "react"
import Select from "../base/Select"
import ContextTheme from "../../contexts/ContextTheme"
import Localization from "../../Localization"


/**
 * A {@link Select} which allows the user to choose between the various available themes, switching between them as soon
 * as the user selects a different one.
 *
 * @param props - Additional props to pass to the {@link Select}.
 * @returns {JSX.Element}
 * @constructor
 */
export default function SelectTheme({ ...props }) {
    const { theme, setTheme } = useContext(ContextTheme)

    return (
        <Select value={theme} onChange={e => setTheme(e.target.value)} {...props}>
            <option value={"ThemeDark"}>{Localization.darkMode}</option>
            <option value={"ThemeLight"}>{Localization.lightMode}</option>
        </Select>
    )
}