import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { PageHeader } from "@/components/ui/page-header"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function PageHeaderDemo() {
  const [tab, setTab] = useState("overview");
  return (
    <PageHeader
              breadcrumb={[{ label: "Projects", href: "#" }, { label: "Atlas platform", href: "#" }, { label: "Deployments" }]}
              title="Deployments"
              meta={<Badge>Production</Badge>}
              description="Every build that has gone out, who shipped it, and whether it held."
              actions={
                <>
                  <Button variant="secondary" size="sm">Export</Button>
                  <Button size="sm">New deployment</Button>
                </>
              }
            >
              <Tabs value={tab} onValueChange={setTab}>
                <TabsList aria-label="Deployment views">
                  <TabsTrigger value="overview">Overview</TabsTrigger>
                  <TabsTrigger value="history">History</TabsTrigger>
                  <TabsTrigger value="settings">Settings</TabsTrigger>
                </TabsList>
              </Tabs>
            </PageHeader>
  );
}