export default {
  name: "Legacy Button",
  acceptsChildren: false,
  category: "Basic",
  isDisabled: true,
  props: [
    {
      label: "Text Content",
      name: "value",
      type: { kind: "text", isDynamic: true },
      default: "Click me",
      isDefault: true,
      placeholder: "enter some text",
      help: "The text that displays in the button",
    },
    {
      label: "Type",
      name: "type",
      type: { kind: "select" },
      default: "button",
      options: [
        { label: "Button", value: "button" },
        { label: "Submit", value: "submit" },
        { label: "Reset", value: "reset" },
      ],
      placeholder: "enter some text",
      help: "This only applies inside a 'Form' component",
    },
    {
      label: "Icon",
      name: "icon",
      type: { kind: "icon" },
      isDefault: true,
      default: null,
      placeholder: "select an icon",
      help: "The icon that displays next to text in button",
    },
    {
      label: "Icon side",
      name: "iconSide",
      type: { kind: "select" },
      default: "left",
      options: [
        { label: "Left", value: "left" },
        { label: "Right", value: "right" },
      ],
      placeholder: "select an icon direction",
      help: "Where the icon should appear in button",
    },
    {
      label: "Aria label",
      name: "aria-label",
      type: { kind: "text", isDynamic: true },
      default: "",
      placeholder: "a descriptive name for your button",
      help: "When only using an icon, this is required for accessibility",
    },
    {
      label: "Is disabled",
      name: "disabled",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "Whether the button is disabled",
    },
    {
      label: "Is Loading?",
      name: "isLoading",
      type: { kind: "boolean", isDynamic: true },
      default: false,
      help: 'Whether the button is in a "loading" state',
    },
  ],
  events: [
    {
      label: "When clicked",
      name: "onClick",
      help: "Select an action to run when button is clicked",
      isDefault: true,
    },
  ],
  defaultStyles: {
    ":hover": {
      "background-color": "var(--theme-border-default)",
    },
    ":active": {
      "background-color": "var(--theme-colors-gray-300)",
    },
    ":focus": {
      outline: "none",
    },
    ":focus-visible": {
      "box-shadow": "var(--theme-shadows-outline)",
    },
    ":disabled": {
      opacity: 0.4,
      cursor: "not-allowed",
      "box-shadow": "none",
    },
    "": {
      "font-family": "var(--theme-fonts-body)",
      "font-weight": "var(--theme-fontWeights-semibold)",
      "font-size": "1rem",
      color: "var(--theme-colors-gray-800)",
      "text-align": "center",
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "inline-flex",
      "flex-direction": "row",
      "justify-content": "center",
      "align-items": "center",
      gap: "8px",
      width: "auto",
      height: "40px",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "16px",
      "padding-left": "16px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "var(--theme-radii-md)",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "var(--theme-colors-gray-100)",
      "box-shadow": "var(--theme-shadows-none)",
      cursor: "pointer",
    },
  },
  sources: [],
  actions: [],
} as const;