Page HeaderPage Header

"use client";

import * as React from "react";
import { PageHeader } from "@/components/ui/notchset/blocks/page-header";

export function AgentHeader() {
  const [tab, setTab] = React.useState("overview");
  const [status, setStatus] = React.useState("live");
  const [following, setFollowing] = React.useState(false);
  return (
    <PageHeader
      breadcrumb={["ACME LABS", "AGENTS", "PLANNER"]}
      title="Planner"
      statuses={[
        { value: "live", label: "LIVE", tone: "live" },
        { value: "paused", label: "PAUSED", tone: "paused" },
      ]}
      status={status}
      onStatusChange={setStatus}
      following={following}
      followers={12}
      onFollowChange={setFollowing}
      primary={{ label: "NEW EVAL RUN", onAction: () => "EVAL RUN QUEUED" }}
      tabs={[
        { value: "overview", label: "OVERVIEW" },
        { value: "runs", label: "RUNS", count: "31,406" },
      ]}
      tab={tab}
      onTabChange={setTab}
    >
      <p>Tab content</p>
    </PageHeader>
  );
}