import figma, { html } from '@figma/code-connect/html';
figma.connect('https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1-609', {
    props: {
        label: figma.string('Label'),
        appearance: figma.enum('Appearance', {
            Standard: 'standard',
            Accent: 'accent',
            Danger: 'danger',
            'Inverse (only on dark background)': 'inverse',
        }),
        size: figma.enum('Size', {
            S: 's',
            'M (default)': 'm',
            L: 'l',
        }),
        disabled: figma.enum('Is disabled', {
            False: false,
            True: true,
        }),
        isLoading: figma.enum('Is loading', {
            False: false,
            True: true,
        }),
        iconOnly: figma.enum('Icon only', {
            False: false,
            True: true,
        }),
        iconLeft: figma.boolean('Icon left'),
        iconRight: figma.boolean('Icon right'),
        outlined: figma.enum('Type', {
            Filled: false,
            Outlined: true,
            Ghost: false,
        }),
        ghost: figma.enum('Type', {
            Filled: false,
            Outlined: false,
            Ghost: true,
        }),
    },
    example: ({ label, appearance, size, disabled, isLoading, outlined, ghost }) => html `<m-button
        appearance="${appearance}"
        size="${size}"
        disabled="${disabled}"
        outlined="${outlined}"
        ghost="${ghost}"
        isloading="${isLoading}"
      >
        ${label}
      </m-button>`,
});
