import {
  Badge,
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Button,
} from "@cooud-ui/ui";
import { Download, Plus } from "lucide-react";

export function PageHeaderBlock() {
  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="#projects">Projects</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#aurora">Aurora</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Settings</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="flex flex-col gap-5 lg:flex-row lg:items-center 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">
              Project settings
            </h1>
            <Badge variant="success">Active</Badge>
          </div>
          <p className="max-w-xl text-sm text-fg-secondary">
            Manage the configuration, members, and billing for the Aurora workspace.
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-3">
          <Button variant="outline">
            <Download className="size-4" aria-hidden="true" />
            Export
          </Button>
          <Button variant="gradient">
            <Plus className="size-4" aria-hidden="true" />
            New deploy
          </Button>
        </div>
      </div>
    </header>
  );
}