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

export function CodeAnnotation({ owner, repo, alert }: { owner: string; repo: string; alert: PullCodeAlert }) {
  return (
    <div className="m-2 rounded-md border border-red-900/70 bg-red-950/30 p-2 font-sans text-sm">
      <div className="flex items-center gap-2">
        <span className="label-caps text-red-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>
    </div>
  );
}