export default {
  name: "Tooltip",
  acceptsChildren: true,
  category: "Overlay",
  styleProps: [
    {
      label: "Color Palette",
      name: "data-palette",
      type: { kind: "palette" },
      default: "neutral",
      help: "The color scheme of the button",
    },
  ],
  props: [
    {
      label: "Label",
      name: "label",
      type: { kind: "text", isDynamic: true },
      default: "",
      required: true,
      placeholder: "Enter some text",
      help: "The text to display in tooltip",
    },
    {
      label: "Side",
      name: "side",
      type: { kind: "select" },
      isDefault: true,
      default: "top",
      options: [
        { label: "Top", value: "top" },
        { label: "Bottom", value: "bottom" },
        { label: "Left", value: "left" },
        { label: "Right", value: "right" },
      ],
      placeholder: "Choose a position",
      help: "The position of the tooltip",
    },
    {
      label: "Align",
      name: "align",
      type: { kind: "select" },
      isDefault: true,
      default: "center",
      options: [
        { label: "Start", value: "start" },
        { label: "Center", value: "center" },
        { label: "End", value: "end" },
      ],
      placeholder: "Choose an alignment",
      help: "The alignment of the tooltip",
    },
    {
      label: "Show Arrow",
      name: "showArrow",
      type: { kind: "checkbox" },
      default: true,
      placeholder: "",
      help: "Whether to show the arrow",
    },
    {
      label: "Delay",
      name: "delayDuration",
      type: { kind: "number" },
      default: 700,
      placeholder: "700",
      help: "How long to wait before tooltip is shown",
    },
  ],
  defaultStyles: {
    "": {
      "background-color": "var(--palette-subtle)",
      color: "var(--palette-fg)",
      "border-radius": "var(--theme-radii-sm)",
      "box-shadow": "var(--theme-shadows-md)",
      "font-size": "var(--theme-fontSizes-sm)",
      "z-index": "var(--theme-zIndices-tooltip)",
      "max-width": "20rem",
      display: "flex",
      "justify-content": "flex-start",
      "align-items": "center",
      "padding-left": "8px",
      "padding-right": "8px",
      "padding-top": "2px",
      "padding-bottom": "2px",
    },
  },
  sources: [],
} as const;