import { h, Host } from "@stencil/core";
export const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
  // Vertical padding for top & bottom placement, horizontal for left & right.
  const padding = !placement || placement === "top" || placement === "bottom"
    ? "var(--sl-spacing-x-large) 0;"
    : "0 var(--sl-spacing-xx-large);";
  const vanillaStyle = `
    sl-tab-panel::part(base) {
      padding: ${padding};
    }

    sl-tab::part(base) {
      color: ${textColor};
      font-family: var(--sqm-primary-font);
    }



    sl-tab-group::part(tabs) {
      border-bottom: 2px solid var(--sqm-border-color);
      font-family: var(--sqm-primary-font);
    }
  `;
  return (h(Host, null,
    h("style", { type: "text/css" }, vanillaStyle),
    h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
      const slotName = tab.getAttribute("slot");
      if (tab.tagName === "RAISINS-PLOP-TARGET") {
        return (h("sl-tab", { slot: "nav" },
          h("div", { style: { marginTop: "10px" } },
            h("slot", { name: slotName }))));
      }
      return [
        h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
        h("sl-tab-panel", { name: slotName },
          h("slot", { name: slotName })),
      ];
    })),
    h("div", { style: { display: "none" } },
      h("slot", null))));
};
