'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'

export function LogoutButton({ className }: { className?: string }) {
  const t = useTranslations('Nav')
  const router = useRouter()
  const [busy, setBusy] = useState(false)

  async function logout() {
    setBusy(true)
    await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' })
    router.push('/')
    router.refresh()
  }

  return (
    <button onClick={logout} disabled={busy} className={className ?? 'text-amber-200 hover:text-amber-400'}>
      {t('logout')}
    </button>
  )
}