admin / Synapse-Sonar

import NetworkGraph from "@/components/NetworkGraph";

export default function MapPage() {
  return (
    <div className="flex h-full flex-col">
      <header className="flex items-center justify-between border-b border-slate-800 bg-[#0f172a] px-6 py-3">
        <div>
          <h1 className="text-sm font-semibold text-slate-100">Internal Attack Surface</h1>
          <p className="text-xs text-slate-500">
            Live topology · hover a node for details, click to deep-dive
          </p>
        </div>
        <div className="flex items-center gap-4 text-xs text-slate-400">
          <Legend color="#06b6d4" label="Data flow" />
          <Legend color="#ef4444" label="Critical CVE" />
          <Legend color="#f43f5e" label="Rogue / Shadow IT" />
          <Legend color="#8b5cf6" label="Blast radius" />
        </div>
      </header>
      <div className="flex-1">
        <NetworkGraph />
      </div>
    </div>
  );
}

function Legend({ color, label }: { color: string; label: string }) {
  return (
    <span className="flex items-center gap-1.5">
      <span
        className="h-2 w-2 rounded-full"
        style={{ backgroundColor: color, boxShadow: `0 0 6px ${color}` }}
      />
      {label}
    </span>
  );
}