import { useUser } from '../../user/user.ts'
import NavButton from '../../../components/buttons/NavButton.tsx'
import { useLocation } from 'react-router-dom'
import { useTranslations } from '../../i18n/translations.ts'

export default function AuthNavButtons() {
  const { t } = useTranslations()
  const user = useUser()

  const { pathname } = useLocation()

  const redirectQuery = new URLSearchParams()
  redirectQuery.set('t', pathname)

  const loggedIn = user != null

  if (loggedIn) {
    return (
      <>
        <NavButton to="/logout">{t('nav.logout')}</NavButton>
      </>
    )
  } else {
    const search = redirectQuery.toString()
    return (
      <>
        <NavButton to={{ pathname: '/login', search }}>{t('nav.login')}</NavButton>
        <NavButton to={{ pathname: '/signup', search }}>{t('nav.register')}</NavButton>
      </>
    )
  }
}