import figma from '@figma/code-connect';

figma.connect(
  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=6-29597',
  {
    imports: ["import { ActionListboxItem } from '@mozaic-ds/web-components/svelte';"],
    props: {
      label: figma.string('Label'),
      hasIcon: figma.boolean('Has icon'),
      divider: figma.enum('Is a divider', {
        False: false,
        True: true,
      }),
      appearance: figma.enum('Appearence', {
        Standard: 'standard',
        Danger: 'danger',
      }),
      state: figma.enum('State', {
        Default: 'default',
        Hovered: 'hovered',
        Focused: 'focused',
        Disabled: 'disabled',
      }),
      disabled: figma.enum('State', {
        Disabled: true,
      }),
    },
    example: ({ label, appearance, divider, disabled }) => (
      <ActionListboxItem
        label={label}
        appearance={appearance}
        divider={divider}
        disabled={disabled}
      ></ActionListboxItem>
    ),
  },
);
