'use client'

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

export function LogoutButton() {
  const t = useTranslations('Account')
  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="rounded border border-amber-900/60 px-4 py-2 text-amber-200 disabled:opacity-60"
    >
      {t('logout')}
    </button>
  )
}
