import { jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { useResponsiveStyle } from "../../../../../../components/utils/responsive-style";
import { useStyle } from "../../../../use-style";
import { BlockType } from "../../../../../../slate/types";
function BlockElement({ element, attributes, children }) {
  const blockStyles = [
    useStyle({ margin: 0 }),
    useStyle(useResponsiveStyle([element.textAlign], ([textAlign = "left"]) => ({ textAlign })))
  ];
  const quoteStyles = useStyle({
    padding: "0.5em 10px",
    fontSize: "1.25em",
    fontWeight: "300",
    borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
  });
  switch (element.type) {
    case BlockType.Default:
    case BlockType.Paragraph:
      return /* @__PURE__ */ jsx("p", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading1:
      return /* @__PURE__ */ jsx("h1", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading2:
      return /* @__PURE__ */ jsx("h2", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading3:
      return /* @__PURE__ */ jsx("h3", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading4:
      return /* @__PURE__ */ jsx("h4", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading5:
      return /* @__PURE__ */ jsx("h5", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.Heading6:
      return /* @__PURE__ */ jsx("h6", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.BlockQuote:
      return /* @__PURE__ */ jsx("blockquote", { ...attributes, className: cx(...blockStyles, quoteStyles), children });
    case BlockType.OrderedList:
      return /* @__PURE__ */ jsx("ol", { ...attributes, className: cx(...blockStyles), style: { listStylePosition: "inside" }, children });
    case BlockType.UnorderedList:
      return /* @__PURE__ */ jsx("ul", { ...attributes, className: cx(...blockStyles), style: { listStylePosition: "inside" }, children });
    case BlockType.ListItem:
      return /* @__PURE__ */ jsx("li", { ...attributes, className: cx(...blockStyles), children });
    case BlockType.ListItemChild:
      return /* @__PURE__ */ jsx("span", { ...attributes, className: cx(...blockStyles), children });
  }
}
export {
  BlockElement
};
//# sourceMappingURL=block.js.map