import { usePlayerSessionStore } from '@/stores/playerSessionStore';

/** Live feed of dice rolls broadcast by seated players (and oneself). */
export function RollFeed() {
  const rolls = usePlayerSessionStore((s) => s.rolls);
  if (rolls.length === 0) return null;
  return (
    <section className="mt-6">
      <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-muted">Table rolls</h2>
      <ul className="space-y-1">
        {rolls.map((r) => (
          <li key={r.id} className="flex items-baseline gap-2 rounded-md border border-line bg-panel px-3 py-1.5 text-sm">
            <span className="font-semibold text-accent">{r.playerName}</span>
            <span className="flex-1 truncate text-ink">{r.label || r.expression}</span>
            <span className="font-display text-lg font-bold text-ink">{r.total}</span>
            <span className="hidden truncate text-xs text-muted sm:inline">{r.breakdown}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}
