import type { AcceptedRegulatoryControl } from './use-regulatory-mapping';
import './compliance.css';

/** Finding Reader section of the controls accepted for this finding, read like `Description`. */
export function FindingIsoControls({ controls }: { controls: AcceptedRegulatoryControl[] }) {
  if (!controls.length) return null;
  return <div className="finding-iso-controls" data-iso-controls>
    <h4>ISO controls</h4>
    <ul>{controls.map(control => <li key={control.controlId}>
      <strong>{control.annexAControlId}</strong>{control.title && <span>{control.title}</span>}
    </li>)}</ul>
  </div>;
}