import React from 'react';

import { PLUGINS } from './data/plugins';

interface VulnerabilityCategoriesTablesProps {
  label: string;
  vulnerabilityType?: string;
}

const VulnerabilityCategoriesTables = ({
  label,
  vulnerabilityType,
}: VulnerabilityCategoriesTablesProps) => {
  // If vulnerabilityType is provided, only show plugins of that type
  const relevantPlugins = vulnerabilityType
    ? PLUGINS.filter((plugin) => plugin.vulnerabilityType === vulnerabilityType)
    : PLUGINS.filter((plugin) => plugin.label === label);

  // Sort the plugins alphabetically by name
  const sortedPlugins = relevantPlugins.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Plugin ID</th>
          </tr>
        </thead>
        <tbody>
          {sortedPlugins.map((plugin) => (
            <tr key={plugin.pluginId}>
              <td>
                <a href={plugin.link}>{plugin.name}</a>
              </td>
              <td>{plugin.description}</td>
              <td>
                <code>{plugin.pluginId}</code>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default VulnerabilityCategoriesTables;