"use client";

import { useEffect, useState } from "react";

import { cn } from "@/lib/utils";

function compact(from: number, now: number): string {

  const secs = Math.max(0, Math.round((now - from) / 1000));

  if (secs < 60) return `${secs}s`;

  const mins = Math.round(secs / 60);

  if (mins < 60) return `${mins}m`;

  const hrs = Math.round(mins / 60);

  if (hrs < 24) return `${hrs}h`;

  return `${Math.round(hrs / 24)}d`;

}

export function RelativeTime({ iso, className }: { iso: string; className?: string }) {

  const from = new Date(iso).getTime();

  const [now, setNow] = useState<number>(() => from);

  useEffect(() => {

    setNow(Date.now());

    const id = window.setInterval(() => setNow(Date.now()), 1000);

    return () => window.clearInterval(id);

  }, []);

  const ago = compact(from, now);

  return (

    <time

      dateTime={iso}

      title={new Date(iso).toLocaleString()}

      className={cn("tabular font-mono text-[var(--color-fg-tertiary)]", className)}

    >

      {ago} ago

    </time>

  );

}