'use client';
import { FunctionComponent } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { usePathname, useRouter } from '@/i18n/navigation';
import type { Locale } from '@/i18n/routing';
import AppIconButton from '../AppIconButton';

const LOCALE_LABEL: Record<Locale, string> = { fa: 'فارسی', en: 'English' };

/**
 * Switches between `fa`/`en` while preserving the current route — `router.replace(pathname,
 * { locale })` via the `@/i18n/navigation` wrapper, so a deep link (e.g. `/fa/nurse/earnings`)
 * lands on the same page in the other locale rather than resetting to home.
 * @component LocaleSwitcher
 */
const LocaleSwitcher: FunctionComponent = () => {
  const locale = useLocale() as Locale;
  const pathname = usePathname();
  const router = useRouter();
  const t = useTranslations('common');
  const nextLocale: Locale = locale === 'fa' ? 'en' : 'fa';

  return (
    <AppIconButton
      icon="language"
      title={t('switch_locale', { locale: LOCALE_LABEL[nextLocale] })}
      onClick={() => router.replace(pathname, { locale: nextLocale })}
    />
  );
};

export default LocaleSwitcher;