import { jsxs, jsx } from 'react/jsx-runtime';

function PageHeader({
  title,
  description,
  childrenTop,
  childrenBottom
}) {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: "flex max-w-2xl flex-col items-center lg:gap-4 gap-2 text-center wrap-anywhere",
      "data-testid": "page-header",
      children: [
        childrenTop,
        /* @__PURE__ */ jsx(
          "h1",
          {
            className: "font-medium font-sans lg:text-6xl text-4xl tracking-tight",
            "data-testid": "page-title",
            children: title
          }
        ),
        description && /* @__PURE__ */ jsx(
          "p",
          {
            className: "text-muted-foreground wrap-anywhere",
            "data-testid": "page-description",
            children: description
          }
        ),
        childrenBottom
      ]
    }
  );
}

export { PageHeader };
