export default {
  name: "Spinner",
  acceptsChildren: false,
  category: "Basic",
  props: [
    {
      label: "Style",
      name: "spinner",
      type: { kind: "select" },
      default: "CircleFade",
      isDefault: true,
      options: [
        { label: "Plane", value: "Plane" },
        { label: "Chase", value: "Chase" },
        { label: "Bounce", value: "Bounce" },
        { label: "Wave", value: "Wave" },
        { label: "Pulse", value: "Pulse" },
        { label: "Flow", value: "Flow" },
        { label: "Swing", value: "Swing" },
        { label: "Circle", value: "Circle" },
        { label: "Circle with fade", value: "CircleFade" },
        { label: "Grid", value: "Grid" },
        { label: "Fold", value: "Fold" },
        { label: "Wander", value: "Wander" },
      ],
      placeholder: "choose a spinner style",
      help: "The style of the spinner",
    },
    {
      label: "Delay",
      name: "delay",
      type: { kind: "number", isDynamic: true },
      default: 0,
      placeholder: "No delay",
      help: "Amount of time to delay in ms",
    },
  ],
  defaultStyles: {
    "": {
      width: "40px",
      height: "40px",
      margin: "auto",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: "var(--theme-brand-neutral-emphasized)",
    },
  },
  sources: [],
} as const;