import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { ActivityTicks } from '#/components/molecules/activity-ticks.jsx';
import { isEmpty } from '#/lib/git.js';

/**
 * How lately one repository was worked on, as a row of ticks. The dates come
 * with the listing's summary, one read for the page, so a card paints from
 * the record it already holds and the gauge fills in when the summary lands.
 *
 * A repository with nothing pushed draws no gauge, and knowing that from the
 * record costs no read. Every other card holds the row's height from the
 * first frame, so a card does not grow under the reader when its dates land.
 * @param {{repo: Record<string, unknown>, dates: number[]|undefined}} props
 */
export function RepoActivity({ repo, dates }) {
  if (isEmpty(repo)) return null;
  return (
    <span className="flex h-3 w-full items-end">
      {dates === undefined ? (
        <Skeleton className="h-3 w-full" />
      ) : dates.length ? (
        <ActivityTicks dates={dates} />
      ) : null}
    </span>
  );
}