import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { dateDisplayer } from './date-displayer';

/**
 * The component-facing date formatter.
 *
 * A hook rather than a bare import so the calling component is subscribed to
 * i18next: switching language re-renders it and the dates flip with everything
 * else. `useTranslation()` with no instance argument resolves to the app's own
 * <I18nextProvider> (portal router.tsx, backoffice AppProviders.tsx), which is
 * what makes this work across two separate i18n instances.
 *
 * The returned function is stable per language, so it is safe — and required —
 * as a useMemo/useCallback dependency.
 */
export function useDateDisplayer(): (
  value: string | number | Date | null | undefined,
) => string {
  const { i18n } = useTranslation();
  return useCallback((value) => dateDisplayer(value, i18n.language), [i18n.language]);
}