'use client';

import { IncidentRow } from '@/components/incidents/IncidentRow';
import { Empty } from '@/components/ui/primitives';
import { useLive } from '@/lib/live';
import type { Incident } from '@/lib/types';

export function IncidentsList({ initial, compact = false, limit }: { initial: Incident[] | null; compact?: boolean; limit?: number }) {
  const live = useLive((s) => s.incidents);
  let list = live ?? initial ?? [];
  if (limit) list = list.slice(0, limit);
  if (!list.length) return <Empty>No active incident. Anomalies below the detection threshold are not reported.</Empty>;
  return (
    <ul className="divide-y divide-line">
      {list.map((inc) => (
        <IncidentRow key={inc.event_id} inc={inc} compact={compact} />
      ))}
    </ul>
  );
}