import { useTranslation } from "react-i18next";
import { formatDateTime, formatDateTimeSec, relativeFromMs } from "../../lib/format";

// docs/DESIGN.md "Copy": a relative time ("3d ago") says how recent something is in a list, and the
// exact moment is one hover away — so the pair travels together here instead of every list
// remembering (or forgetting) its own `title`. `seconds` is the log form (the audit). An unreadable
// or missing moment renders `empty` ("—" in a table cell) or nothing.
export function RelativeTime({
  at,
  seconds = false,
  empty = "",
  className,
}: {
  /** An ISO timestamp, or epoch millis (a client-side notification). */
  at: string | number | null | undefined;
  seconds?: boolean;
  empty?: string;
  className?: string;
}) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const ms = typeof at === "number" ? at : at ? new Date(at).getTime() : NaN;
  const text = Number.isFinite(ms) ? relativeFromMs(ms, lang, t) : "";
  if (!text) return empty ? <span className={className}>{empty}</span> : null;
  const iso = new Date(ms).toISOString();
  return (
    <time
      dateTime={iso}
      title={seconds ? formatDateTimeSec(iso, lang) : formatDateTime(iso, lang)}
      className={className}
    >
      {text}
    </time>
  );
}