'use client';

import { Globe } from 'lucide-react';
import { useLocale, useTranslations } from 'next-intl';
import type { Locale } from '@/i18n/config';
import { usePathname, useRouter } from '@/i18n/navigation';

const localeLabels: Record<Locale, string> = {
  vi: 'VI',
  en: 'EN',
};

export function LanguageSwitcher() {
  const locale = useLocale() as Locale;
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations('language');

  const switchLocale = (newLocale: Locale) => {
    router.replace(pathname, { locale: newLocale });
  };

  const nextLocale: Locale = locale === 'vi' ? 'en' : 'vi';

  return (
    <button
      type="button"
      onClick={() => switchLocale(nextLocale)}
      className="inline-flex h-9 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
      aria-label={`${t('label')}: ${t(locale)} → ${t(nextLocale)}`}
    >
      <Globe className="h-4 w-4" aria-hidden="true" />
      <span aria-hidden="true">{localeLabels[nextLocale]}</span>
      <span className="sr-only">{t(nextLocale)}</span>
    </button>
  );
}