"use client";

import { StatusBadge } from "@/components/shared/status-badge";
import type { NodeDetail } from "../node-detail-data";
import { InboundsTab } from "./tabs/inbounds-tab";

export function NodeDetailTabs({ node }: { node: NodeDetail }) {
  return (
    <section className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="text-xs font-medium tracking-wide text-muted-foreground">线路入口</p>
          <h2 className="text-lg font-semibold tracking-tight">3x-ui 入站</h2>
        </div>
        <StatusBadge tone={node.inbounds.length > 0 ? "info" : "neutral"}>
          {node.inbounds.length} 个
        </StatusBadge>
      </div>
      <InboundsTab node={node} />
    </section>
  );
}