import {
  Badge,
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Button,
  Tabs,
  TabsList,
  TabsTrigger,
} from "@cooud-ui/ui";

export function PageHeaderTabsBlock() {
  return (
    <header className="flex flex-col gap-6 rounded-2xl border border-border bg-surface-raised p-6 sm:p-8">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#workspace">Workspace</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Billing</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-3">
            <h1 className="font-display text-3xl font-semibold tracking-tight text-fg">Billing</h1>
            <Badge variant="primary">Pro plan</Badge>
          </div>
          <p className="max-w-xl text-sm text-fg-secondary">
            Review usage, invoices, and payment methods for your team.
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-3">
          <Button variant="outline">View invoices</Button>
          <Button variant="gradient">Manage plan</Button>
        </div>
      </div>

      <Tabs defaultValue="overview">
        <TabsList aria-label="Billing sections">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="usage">Usage</TabsTrigger>
          <TabsTrigger value="invoices">Invoices</TabsTrigger>
          <TabsTrigger value="payment">Payment</TabsTrigger>
        </TabsList>
      </Tabs>
    </header>
  );
}