import type { Issue } from '../lib/types';
import IssueRow from './IssueRow';

interface Props {
  issues: Issue[];
  selectedId: string | null;
  onSelect: (issue: Issue) => void;
}

export default function IssueList({ issues, selectedId, onSelect }: Props) {
  if (issues.length === 0) {
    return (
      <div className="aai-empty">
        <span className="aai-empty__icon" aria-hidden="true">✓</span>
        <p>No issues found. Run a scan to check your site.</p>
      </div>
    );
  }

  // Sort: critical first, then warnings, then notices.
  const ORDER: Record<string, number> = { critical: 0, warning: 1, notice: 2 };
  const sorted = [...issues].sort(
    (a, b) => (ORDER[a.severity] ?? 3) - (ORDER[b.severity] ?? 3)
  );

  return (
    <div className="issue-list" role="list">
      {sorted.map((issue) => (
        <IssueRow
          key={issue.id}
          issue={issue}
          selected={issue.id === selectedId}
          onClick={() => onSelect(issue)}
        />
      ))}
    </div>
  );
}