Page Header

import { ArrowRightIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

type PageHeaderProps = {
  eyebrow?: string
  title?: string
  description?: string
  primaryAction?: string
  secondaryAction?: string
}

export function PageHeader({
  eyebrow = "Workspace",
  title = "Build a reusable product surface",
  description = "Use this header for dashboards, settings pages, and internal tools that need a clear title, short context, and primary action.",
  primaryAction = "Create item",
  secondaryAction = "View docs",
}: PageHeaderProps) {
  return (
    <section className="flex w-full flex-col gap-5 rounded-xl border bg-card p-6 text-card-foreground">
      <div className="flex flex-col gap-3">
        <Badge className="w-fit" variant="secondary">
          {eyebrow}
        </Badge>
        <div className="flex max-w-2xl flex-col gap-2">
          <h2 className="text-2xl font-semibold tracking-tight">{title}</h2>
          <p className="text-sm leading-6 text-muted-foreground">
            {description}
          </p>
        </div>
      </div>
      <div className="flex flex-wrap gap-2">
        <Button>
          {primaryAction}
          <ArrowRightIcon data-icon="inline-end" />
        </Button>
        <Button variant="outline">{secondaryAction}</Button>
      </div>
    </section>
  )
}