import Link from "next/link";
import { ChevronRight } from "lucide-react";
export function PageHeader({
  title,
  parent,
  currentPage,
}: {
  title: string;
  parent?: { label: string; href: string };
  currentPage?: string;
}) {
  return (
    <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
      <h1 className="min-w-0 break-words text-xl font-semibold">{title}</h1>
      <nav aria-label="Breadcrumb" className="min-w-0">
        <ol className="flex flex-wrap items-center gap-2 text-sm">
          <li>
            <Link href="/" className="text-muted-foreground">
              Home
            </Link>
          </li>
          <ChevronRight
            className="size-4 text-muted-foreground"
            aria-hidden="true"
          />
          {parent && (
            <>
              <li>
                <Link href={parent.href} className="text-muted-foreground">
                  {parent.label}
                </Link>
              </li>
              <ChevronRight
                className="size-4 text-muted-foreground"
                aria-hidden="true"
              />
            </>
          )}
          <li className="max-w-xs truncate font-medium" aria-current="page">
            {currentPage ?? title}
          </li>
        </ol>
      </nav>
    </div>
  );
}