import { NavLink, Stack } from "@mantine/core"; 
import {
  IconGauge,
  IconServer,
  IconActivity,
  IconFileText,
  IconAlertCircle,
} from "@tabler/icons-react";
import { Link, useLocation } from "react-router-dom";

export default function Sidebar() {
  const location = useLocation(); // 路由变化时会触发 Sidebar 重新渲染

  const links = [
    { to: "/dashboard", label: "概览仪表盘", icon: <IconGauge size={16} /> },
    { to: "/nodeInfo", label: "节点信息", icon: <IconServer size={16} /> },
    { to: "/metrics", label: "指标详情", icon: <IconActivity size={16} /> },
    { to: "/logs", label: "日志详情", icon: <IconFileText size={16} /> },
    { to: "/alerts", label: "告警详情", icon: <IconAlertCircle size={16} /> },
  ];

  return (
    <Stack p="md">
      {links.map((link) =>
        link.external ? (
          <NavLink
            key={link.to}
            component="a"
            href={link.to}
            target="_blank"
            rel="noopener noreferrer"
            label={link.label}
            leftSection={link.icon}
          />
        ) : (
          <NavLink
            key={link.to}
            component={Link}
            to={link.to}
            label={link.label}
            leftSection={link.icon}
            active={location.pathname === link.to}
          />
        )
      )}
    </Stack>
  );
}
