import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';

/** Average silent reading speed; reading time = ceil(words / WPM). */
const WORDS_PER_MINUTE = 200;

/**
 * A slim status line shown between the page header and the article body
 * (issue #134): last update, word count, and estimated reading time. Rendered
 * both in the authenticated read view and the anonymous public view, so it
 * takes already-derived values as props rather than reaching into the editor.
 */
export function PageStatusBar({
  updatedAt,
  wordCount,
}: {
  updatedAt: string;
  wordCount: number;
}): React.JSX.Element {
  const { t, i18n } = useTranslation('common');

  const updated = useMemo(() => {
    const date = new Date(updatedAt);
    if (Number.isNaN(date.getTime())) return null;
    return new Intl.DateTimeFormat(i18n.language, {
      dateStyle: 'medium',
      timeStyle: 'short',
    }).format(date);
  }, [updatedAt, i18n.language]);

  const minutes = Math.max(1, Math.ceil(wordCount / WORDS_PER_MINUTE));

  return (
    <div className="page-statusbar" aria-label={t('statusbar.label')}>
      {updated && (
        <span className="page-statusbar__item">{t('statusbar.updated', { date: updated })}</span>
      )}
      <span className="page-statusbar__item">{t('statusbar.words', { count: wordCount })}</span>
      {wordCount > 0 && (
        <span className="page-statusbar__item">{t('statusbar.readingTime', { minutes })}</span>
      )}
    </div>
  );
}