import { useAuth } from '../../hooks/useAuth'
import { useI18n } from '../../i18n/useI18n'

interface TopbarProps {
  title: string
}

export function Topbar({ title }: TopbarProps) {
  const { user, logout } = useAuth()
  const { t } = useI18n()

  const handleLogout = async () => {
    try {
      await logout()
    } catch {
      // ignore
    }
  }

  return (
    <header className="topbar">
      <div className="topbar-left">
        <span className="topbar-title">{title}</span>
      </div>
      <div className="topbar-right">
        {user && (
          <>
            <span className="topbar-user">{user.display_name}</span>
            <button className="btn btn-ghost btn-sm" onClick={handleLogout}>
              {t('btn.logout')}
            </button>
          </>
        )}
      </div>
    </header>
  )
}