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

figma.connect(
  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=1-609',
  {
    imports: ["import { Button } from '@mozaic-ds/web-components/svelte';"],
    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,
      }),
      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 }) => (
      <Button
        appearance={appearance}
        size={size}
        disabled={disabled}
        isloading={isloading}
        outlined={outlined}
        ghost={ghost}
      >
        {label}
      </Button>
    ),
  },
);
