import { SEVERITY_ORDER } from '#site/next.constants.mjs';

import type { Severity, Vulnerability } from '#site/types';
import type { FC } from 'react';

import VulnerabilityChip from './VulnerabilityChip';

type VulnerabilityChipsProps = {
  vulnerabilities: Array<Vulnerability>;
};

const VulnerabilityChips: FC<VulnerabilityChipsProps> = ({
  vulnerabilities,
}) => {
  // Group vulnerabilities by severity
  const groupedBySeverity = vulnerabilities.reduce<Record<string, number>>(
    (acc, vuln) => {
      const severity = vuln.severity.toLowerCase();
      acc[severity] = (acc[severity] || 0) + 1;
      return acc;
    },
    {}
  );

  return (
    <div className="flex flex-row flex-wrap gap-1 max-sm:justify-end">
      {SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map(
        severity => (
          <VulnerabilityChip
            key={severity}
            severity={severity as Severity}
            count={groupedBySeverity[severity]}
          />
        )
      )}
    </div>
  );
};

export default VulnerabilityChips;
