import { useEffect, useState } from "react";
import { Text, type TextProps } from "react-native";
import { formatDistanceToNow } from "@/lib/time-utils";

const MINUTE_MS = 60_000;

interface RelativeTimestampProps extends Omit<TextProps, "children"> {
  date: Date;
}

/**
 * Re-renders once per minute so labels like "5m ago" stay accurate without
 * any per-card timer wiring at the call site.
 */
export function RelativeTimestamp({ date, ...rest }: RelativeTimestampProps) {
  const [, force] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => force((n) => n + 1), MINUTE_MS);
    return () => clearInterval(interval);
  }, []);

  return <Text {...rest}>{formatDistanceToNow(date)}</Text>;
}