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

figma.connect(
  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=426-29313',
  {
    imports: ["import { AccordionList } from '@mozaic-ds/web-components/svelte';"],
    props: {
      title: figma.string('Title'),
      subtitle: figma.string('Subtitle'),
      hasSubtitle: figma.boolean('Has subtitle'),
      hasIcon: figma.boolean('Has Icon'),
      hasCustomSlot: figma.boolean('Has custom slot'),
      hasParagraph: figma.boolean('Has paragraph'),
      isExpanded: figma.enum('Is expanded', {
        False: false,
        True: true,
      }),
      state: figma.enum('State', {
        Default: 'default',
        Hover: 'hover',
        Focused: 'focused',
      }),
    },
    example: ({ title, subtitle }) => (
      <AccordionList appearance="standard">
        <m-accordion-list-item
          id="section-1"
          title={title}
          subtitle={subtitle}
          content="Accordion item content"
        ></m-accordion-list-item>
      </AccordionList>
    ),
  },
);
