import {type FunctionComponent, useContext} from 'react'
import {Link} from 'react-router'
import {LanguageContext} from '@/context/languageProvider.tsx'

const Navbar: FunctionComponent = () => {
  const {selectedLanguage, setSelectedLanguage} = useContext(LanguageContext)

  return (
    <div className="navbar">
      <div>
        <Link to="/collection">Museum</Link>
      </div>
      <div className="language-buttons">
        <button onClick={() => setSelectedLanguage('EN')} className={selectedLanguage === 'EN' ? 'active' : ''}>
          🇬🇧EN
        </button>
        <button onClick={() => setSelectedLanguage('NL')} className={selectedLanguage === 'NL' ? 'active' : ''}>
          🇬🇳NL
        </button>
        <button onClick={() => setSelectedLanguage('FR')} className={selectedLanguage === 'FR' ? 'active' : ''}>
          🇫🇷FR
        </button>
      </div>
    </div>
  )
}

export default Navbar
