import React, { useState } from 'react';
import { css } from '@emotion/css';
import { useTheme2, IconButton } from '@grafana/ui';

const GenericConfigSection = ({
  children,
  title,
  description,
  isCollapsible = false,
  isInitiallyOpen = true,
  kind = "section",
  className
}) => {
  const { colors, typography, spacing } = useTheme2();
  const [isOpen, setIsOpen] = useState(isCollapsible ? isInitiallyOpen : true);
  const iconName = isOpen ? "angle-up" : "angle-down";
  const isSubSection = kind === "sub-section";
  const collapsibleButtonAriaLabel = `${isOpen ? "Collapse" : "Expand"} section ${title}`;
  const styles = {
    header: css({
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center"
    }),
    title: css({
      margin: 0
    }),
    subtitle: css({
      margin: 0,
      fontWeight: typography.fontWeightRegular
    }),
    descriptionText: css({
      marginTop: spacing(isSubSection ? 0.25 : 0.5),
      marginBottom: 0,
      ...typography.bodySmall,
      color: colors.text.secondary
    }),
    content: css({
      marginTop: spacing(2)
    })
  };
  return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: styles.header }, kind === "section" ? /* @__PURE__ */ React.createElement("h3", { className: styles.title }, title) : /* @__PURE__ */ React.createElement("h6", { className: styles.subtitle }, title), isCollapsible && /* @__PURE__ */ React.createElement(
    IconButton,
    {
      name: iconName,
      onClick: () => setIsOpen(!isOpen),
      type: "button",
      size: "xl",
      "aria-label": collapsibleButtonAriaLabel
    }
  )), description && /* @__PURE__ */ React.createElement("p", { className: styles.descriptionText }, description), isOpen && /* @__PURE__ */ React.createElement("div", { className: styles.content }, children));
};

export { GenericConfigSection };
//# sourceMappingURL=GenericConfigSection.js.map
