'use client';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { fmtAgo } from '@/lib/format';

/** Green live dot with optional pulse ring. */
export function Dot({ pulse = false, className, tone = 'positive' }: { pulse?: boolean; className?: string; tone?: 'positive' | 'warning' | 'danger' | 'muted' }) {
  return <span className={cn('dot', pulse && 'pulse', tone === 'warning' && 'bg-warning', tone === 'danger' && 'bg-danger', tone === 'muted' && 'bg-ink-3', className)} aria-hidden />;
}

/** "3 min ago" that re-renders every 30 s. Renders the server value first (no hydration mismatch: same formatting). */
export function LiveAgo({ at, prefix = '', className }: { at: string | null | undefined; prefix?: string; className?: string }) {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const t = setInterval(() => setNow(Date.now()), 30_000);
    return () => clearInterval(t);
  }, []);
  return (
    <time dateTime={at ?? undefined} className={cn('tnum', className)} suppressHydrationWarning>
      {prefix}
      {fmtAgo(at, now ?? undefined)}
    </time>
  );
}