StaleIndicator

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { AsOf } from "@/components/ledger/as-of";
import { ArrowPathIcon } from "@/components/ledger/icons";

export interface StaleIndicatorProps extends React.ComponentPropsWithoutRef<"div"> {
  lastSynced: Date;
  onRetry?: () => void;
  timeZone?: string;
}

/**
 * Stale financial data presented as current is the most dangerous state in
 * the product. This component exists so that state is impossible to miss.
 */
export const StaleIndicator = React.forwardRef<HTMLDivElement, StaleIndicatorProps>(
  ({ className, lastSynced, onRetry, timeZone, ...props }, ref) => (
    <div
      className={cn("inline-flex items-center gap-2 rounded-sm bg-warning-subtle px-2 py-1", className)}
      ref={ref}
      role="status"
      {...props}
    >
      <span aria-hidden="true" className="size-1.5 rounded-full bg-[var(--warning)]" />
      {/* The date carries the alarm; the clock time and zone are on hover. The
          full stamp is the longest run of text in a strip that has to fit
          inside a card, and it is the part nobody reads first. */}
      <AsOf
        className="text-caption text-text-secondary"
        compact
        date={lastSynced}
        prefix="Last synced"
        timeZone={timeZone}
      />
      {onRetry ? (
        <button
          className="inline-flex items-center gap-1 text-caption font-medium text-accent hover:underline"
          onClick={onRetry}
          type="button"
        >
          <ArrowPathIcon aria-hidden="true" className="size-3" />
          Retry
        </button>
      ) : null}
    </div>
  ),
);
StaleIndicator.displayName = "StaleIndicator";