import { h } from "@stencil/core";
import { heading1, heading2, link, text } from "../../styles/parts";
export const ErrorState = (errorMessage) => (h("main", { class: "p-4 d-flex justify-content-center text-center", style: { fontSize: "1.2rem" } }, h("p", { part: text }, errorMessage)));
export const DetailSectionTitle = (props) => (h("h2", { part: heading2, class: "mt-4 fs-5 border-bottom pb-3" }, props.sectionTitle));
export const DetailItem = ({ title, value, onClick, }) => title && value ? (h("div", { class: "row justify-content-between" }, h("div", { class: "col-12 col-md-4" }, h("span", { class: "fw-bold", part: text }, title)), h("div", { class: `col-12 col-md-8 ${onClick ? "text-decoration-underline text-primary" : ""}`, style: { cursor: onClick ? "pointer" : "auto" }, onClick: () => onClick && onClick() }, h("span", { class: "text-wrap", part: onClick ? link : text }, value)))) : null;
export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { class: `d-flex flex-column ${classes}` }, h("span", { class: "fw-bold border-1 border-bottom ps-2 pe-2", part: heading2 }, title), h("span", { class: "pt-2 ps-2 pe-2", part: text }, value)));
export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: heading1 }, title), badge), h("div", { class: "d-flex flex-row align-items-top", part: text }, children)));
export const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: "mt-4" }, h("pre", { class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;
