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

interface Props {
  issue: Issue;
  selected: boolean;
  onClick: () => void;
}

const SEVERITY_LABEL: Record<string, string> = {
  critical: 'Critical',
  warning:  'Warning',
  notice:   'Notice',
};

export default function IssueRow({ issue, selected, onClick }: Props) {
  return (
    <button
      className={`issue-row${selected ? ' issue-row--selected' : ''}`}
      data-severity={issue.severity}
      onClick={onClick}
      aria-pressed={selected}
      aria-label={`${issue.title} — ${SEVERITY_LABEL[issue.severity] ?? issue.severity}`}
    >
      <span className={`issue-row__badge issue-row__badge--${issue.severity}`}>
        {SEVERITY_LABEL[issue.severity] ?? issue.severity}
      </span>

      <span className="issue-row__body">
        <span className="issue-row__title">{issue.title}</span>
        <span className="issue-row__meta">
          WCAG {issue.wcag}
          {issue.count > 1 && <> &middot; {issue.count} instances</>}
        </span>
      </span>

      <span className="issue-row__arrow" aria-hidden="true">›</span>
    </button>
  );
}