gitfor/platform

import { Link } from "@tanstack/react-router";
import { SeverityBadge } from "./SeverityBadge";
import type { PullCodeAlert } from "~/hooks/use-pull-code-alerts";
import { Callout } from "~/ui/Callout";

export function CodeAnnotation({ owner, repo, alert }: { owner: string; repo: string; alert: PullCodeAlert }) {
  return (
    <Callout tone="danger" className="m-2 p-2 font-sans text-kumo-default">
      <div className="flex items-center gap-2">
        <span className="label-small text-kumo-danger">Code scanning</span>
        <SeverityBadge severity={alert.securitySeverity ?? alert.severity} />
        <Link
          to="/$owner/$repo/security/code-scanning/$number"
          params={{ owner, repo, number: String(alert.number) }}
          className="font-medium text-kumo-strong hover:text-accent-400"
        >
          {alert.ruleName ?? alert.ruleId}
        </Link>
        <span className="text-xs text-kumo-subtle">{alert.tool}</span>
      </div>
      <p className="mt-1 text-kumo-default">{alert.message}</p>
    </Callout>
  );
}