import { jsxs, jsx } from "react/jsx-runtime";
import { aO as manifest } from "./use-page-data.CMUQyNAA.js";
import "@sinclair/typebox";
import { b as useBrickStyle } from "./use-section-style.DjjgfIQS.js";
import { T as TextContent } from "./TextContent.fGn2nGQK.js";
import { a as tx } from "./twind.DdSZmZu6.js";
import { B as BrickRoot } from "./BrickRoot.D_a_fRJm.js";
import { u as useBrickProps } from "./use-brick-props.BH1ptgVL.js";
function isTextContentEmpty(content) {
  return !content || content.trim().length === 0 || content.trim() === "<p></p>";
}
function Hero(_props) {
  const { brick, editable, selected } = _props;
  const props = useBrickProps(_props);
  const styles = useBrickStyle(brick);
  return /* @__PURE__ */ jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx("flex-col gap-[1.5rem] flex-grow", Object.values(styles)),
      children: [
        /* @__PURE__ */ jsx(
          TextContent,
          {
            as: "h1",
            propPath: "content",
            brickId: brick.id,
            content: props.content,
            rawContent: brick.props.content,
            className: tx("prose xl:prose-xl"),
            textSizeMode: "hero",
            editable,
            noTextType: true
          }
        ),
        /* @__PURE__ */ jsx(
          TextContent,
          {
            as: "p",
            propPath: "tagline",
            className: tx(
              "tagline text-2xl font-bold text-balance",
              // When editing, hide tagline if empty but show it on hover
              editable && isTextContentEmpty(props.tagline) && !selected ? "opacity-0 hover:opacity-80" : "opacity-80"
            ),
            brickId: brick.id,
            content: props.tagline,
            rawContent: brick.props.tagline,
            editable
          }
        )
      ]
    }
  );
}
export {
  Hero as default
};
//# sourceMappingURL=hero.IT5bky8g.js.map
