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-gray-300">
      <div className="flex items-center gap-2">
        <span className="label-caps text-danger-300">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-gray-100 hover:text-accent-400"
        >
          {alert.ruleName ?? alert.ruleId}
        </Link>
        <span className="text-xs text-gray-500">{alert.tool}</span>
      </div>
      <p className="mt-1 text-gray-300">{alert.message}</p>
    </Callout>
  );
}