import {FunctionComponent, useContext} from 'react'
import {ThemeContext} from '../context/themeContext.tsx'
import {useGetUser, useLogin, useLogout} from '../api/authApi.ts'

interface NavBarProps {

}

const NavBar: FunctionComponent<NavBarProps> = () => {
    const {accentColor, setAccentColor} = useContext(ThemeContext)
    const {mutate: login} = useLogin()
    const {data: user} = useGetUser()
    const {mutate: logout} = useLogout()

    return (
        <div className={'color-picker'}>
            {user ? <div>Welcome {user.name}
                <button onClick={() => logout()}>Logout</button>
            </div> : <button onClick={() => login()}>Login</button>}

            <input type={'color'} value={accentColor} onChange={evt => setAccentColor(evt.target.value)}/>
        </div>
    )
}

export default NavBar
