import Breadcrumb, { BreadcrumbItem } from "./Breadcrumb";
import { ReactNode } from "react";

export default function PageHeader({
  title,
  description,
  actions,
  breadcrumb
}: {
  title: string;
  description?: string;
  actions?: ReactNode;
  breadcrumb?: BreadcrumbItem[];
}) {
  return (
    <div className="mb-3">
      {breadcrumb && <Breadcrumb items={breadcrumb} />}
      <div className="d-flex justify-content-between align-items-center">
        <div>
          <h2 className="mb-1">{title}</h2>
          {description && <p className="text-muted mb-0">{description}</p>}
        </div>
        {actions}
      </div>
    </div>
  );
}