"use client";
import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

/** Client shell for the request detail tabs; each panel is server-rendered and passed in as a node. */
export function RequestDetailTabs({ overview, attempts, headers, timing, attemptCount, headerCount }: { overview: React.ReactNode; attempts: React.ReactNode; headers: React.ReactNode; timing: React.ReactNode; attemptCount: number; headerCount: number }) {
  return (
    <Tabs defaultValue="overview">
      <TabsList variant="underline">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="attempts">
          Attempts <span className="font-mono text-[11px] text-fg-subtle">{attemptCount}</span>
        </TabsTrigger>
        <TabsTrigger value="headers">
          Headers <span className="font-mono text-[11px] text-fg-subtle">{headerCount}</span>
        </TabsTrigger>
        <TabsTrigger value="timing">Timing</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">{overview}</TabsContent>
      <TabsContent value="attempts">{attempts}</TabsContent>
      <TabsContent value="headers">{headers}</TabsContent>
      <TabsContent value="timing">{timing}</TabsContent>
    </Tabs>
  );
}