'use client';

import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useTransition } from 'react';

import { Button } from '@sport/ui';

import { LanguageSwitcher } from '@/components/language-switcher';

import { useSession } from './session-provider';

export function SessionBar() {
  const t = useTranslations('common');
  const { user, signOut } = useSession();
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  function handleSignOut() {
    startTransition(async () => {
      await signOut();
      router.replace('/login');
    });
  }

  return (
    <header className="border-ink-200 flex h-14 items-center justify-end gap-4 border-b bg-white px-6">
      <LanguageSwitcher />

      {user ? (
        <>
          <span className="text-ink-500 text-xs font-medium">
            {t('session.signedInAs', { name: user.displayName })}
          </span>
          <Button variant="ghost" size="sm" onClick={handleSignOut} disabled={isPending}>
            {t('session.signOut')}
          </Button>
        </>
      ) : (
        <span className="text-ink-500 text-xs font-medium">{t('signedOut')}</span>
      )}
    </header>
  );
}