/**
 * Code Connect mapping for MDrawer
 * Links Figma Drawer (ADS2) to @mozaic-ds/vue
 */
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=5-6717',
  {
    props: {
      position: figma.enum('Left alignment', {
        True: 'left',
        False: 'right',
      }),
      extended: figma.enum('Is extended (only from M)', {
        True: true,
        False: false,
      }),
    },
    example: ({ position, extended }) =>
      html`<script setup>
          import { MDrawer, MButton } from '@mozaic-ds/vue';
        </script>

        <MDrawer
          open
          title="Drawer title"
          :position=${position}
          :extended=${extended}
        >
          <p>Drawer content</p>
          <template #footer>
            <MButton>Confirm</MButton>
          </template>
        </MDrawer>`,
  },
);