'use client';

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

export function LocaleSwitcher() {
  const router = useRouter();
  const locale = useLocale();
  const t = useTranslations('locale');
  const [isPending, startTransition] = useTransition();

  function switchLocale() {
    const newLocale = locale === 'de' ? 'en' : 'de';
    document.cookie = `NEXT_LOCALE=${newLocale};path=/;max-age=31536000`;
    startTransition(() => {
      router.refresh();
    });
  }

  const currentLabel = locale === 'de' ? t('de') : t('en');

  return (
    <button
      onClick={switchLocale}
      disabled={isPending}
      className="inline-flex items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors disabled:opacity-50"
      aria-label={currentLabel}
    >
      {locale === 'de' ? 'EN' : 'DE'}
    </button>
  );
}