import { fmtDate, fmtDateTime, relativeTime } from '@/lib/format';

/**
 * Freshness line under each data module: "Data updated <relative> · Source updated <date>".
 * `dataUpdatedAt` is when CancerIndex last refreshed/ingested; `sourceUpdatedAt` is the upstream
 * dataset date (version or published date). Both are optional and render "unknown" honestly.
 */
export function Freshness({
  dataUpdatedAt,
  sourceUpdatedAt,
  sourceVersion,
  extra,
  className = '',
}: {
  dataUpdatedAt?: Date | string | null;
  sourceUpdatedAt?: Date | string | null;
  sourceVersion?: string | null;
  extra?: string;
  className?: string;
}) {
  return (
    <p className={`mt-2 text-[12px] text-ink-3 ${className}`}>
      <span title={dataUpdatedAt ? fmtDateTime(dataUpdatedAt) : undefined}>Data updated {dataUpdatedAt ? relativeTime(dataUpdatedAt) : 'unknown'}</span>
      <span aria-hidden> · </span>
      <span>
        Source updated {sourceUpdatedAt ? fmtDate(sourceUpdatedAt) : sourceVersion ? <span className="ci-mono">{sourceVersion}</span> : 'unknown'}
      </span>
      {extra ? (
        <>
          <span aria-hidden> · </span>
          <span>{extra}</span>
        </>
      ) : null}
    </p>
  );
}