export default {
  name: "Conditional Container",
  acceptsChildren: true,
  category: "Container",
  props: [
    {
      label: "Show",
      name: "isShowing",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      isDefault: true,
      placeholder: "Enter a condition",
      help: "The children of this component will show when condition is true",
    },
    {
      label: "Semantic Element",
      name: "as",
      type: { kind: "select" },
      default: "div",
      options: [
        { label: "div (default)", value: "div" },
        { label: "article", value: "article" },
        { label: "aside", value: "aside" },
        { label: "details", value: "details" },
        { label: "figcaption", value: "figcaption" },
        { label: "figure", value: "figure" },
        { label: "footer", value: "footer" },
        { label: "header", value: "header" },
        { label: "main", value: "main" },
        { label: "mark", value: "mark" },
        { label: "nav", value: "nav" },
        { label: "section", value: "section" },
        { label: "summary", value: "summary" },
        { label: "time", value: "time" },
      ],
      placeholder: "",
      help: "The html tag to use. When in doubt, use 'div'.",
    },
  ],
  events: [
    {
      label: "When clicked",
      isDefault: true,
      name: "onClick",
      help: "Select an action to run when container is clicked",
    },
  ],
  defaultStyles: {
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [],
} as const;