import { type ReactElement, useState } from 'react';
import { useTick } from '#/state/tick';
import { formatTimeAgo } from '#/locale/intl/timeAgo';
export function TimeElapsed({
children,
timestamp,
}: {
children: ({ timeElapsed }: { timeElapsed: string }) => ReactElement;
timestamp: string;
}) {
const tick = useTick();
const [timeElapsed, setTimeElapsed] = useState(() => formatTimeAgo(timestamp, tick));
const [prevTick, setPrevTick] = useState(tick);
const [prevTimestamp, setPrevTimestamp] = useState(timestamp);
if (prevTick !== tick || prevTimestamp !== timestamp) {
setPrevTick(tick);
setPrevTimestamp(timestamp);
setTimeElapsed(formatTimeAgo(timestamp, tick));
}
return children({ timeElapsed });
}