index.tsx

import type { BadgeKind } from '@node-core/ui-components/Common/Badge';
import Badge from '@node-core/ui-components/Common/Badge';
import { useTranslations } from 'next-intl';
import type { FC } from 'react';

import { SEVERITY_KIND_MAP } from '#site/next.constants.mjs';
import type { Severity } from '#site/types';

import styles from './index.module.css';

type VulnerabilityChipProps = {
  severity: Severity;
  count?: number;
};

const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
  severity,
  count = 0,
}) => {
  const t = useTranslations();

  return (
    <Badge
      size="small"
      kind={SEVERITY_KIND_MAP[severity] as BadgeKind}
      className="mr-1"
    >
      {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
      {t(`components.eolChip.severity.${severity}`)}
    </Badge>
  );
};

export default VulnerabilityChip;