/**
 * Code Connect mapping for MTag
 * Links Figma Tag 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=5730-15694',
  {
    props: {
      type: figma.enum('Type', {
        'Informative (Read-only)': 'informative',
        'Interactive (as link or button)': 'interactive',
        Contextualised: 'contextualised',
        Removable: 'removable',
        Selectable: 'selectable',
      }),
    },
    example: ({ type }) =>
      html`<script setup>
          import { MTag } from '@mozaic-ds/vue';
        </script>

        <MTag type=${type} label="Tag label"></MTag>`,
  },
);