import { formatClock, type RoomState } from '@two-keys/shared';
import { useNow } from '../lib/hooks';

/** Elapsed time plus penalties. Runs locally between server updates. */
export function Timer({ timer, receivedAt }: { timer: RoomState['timer']; receivedAt: number }) {
  const now = useNow(1000);
  if (timer.startedAt === null) return null;
  const serverNow = timer.serverNow + (now - receivedAt);
  const elapsed = ((timer.finishedAt ?? serverNow) - timer.startedAt) / 1000;
  return (
    <div
      className="flex items-baseline gap-1.5 font-mono tabular-nums"
      role="timer"
      aria-label={`Time ${formatClock(elapsed + timer.penaltySeconds)}`}
    >
      <span className="text-base font-bold">{formatClock(elapsed + timer.penaltySeconds)}</span>
      {timer.penaltySeconds > 0 && (
        <span className="text-[11px] text-red-300" title="Penalty time from hints and traps">
          +{formatClock(timer.penaltySeconds)}
        </span>
      )}
    </div>
  );
}