/**
 * Code Connect mapping for MTooltip
 * Links Figma Tooltip (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-6487',
  {
    props: {
      text: figma.string('Text'),
      position: figma.enum('Position', {
        Top: 'top',
        Bottom: 'bottom',
        Left: 'left',
        Right: 'right',
      }),
      pointer: figma.boolean('Pointer'),
    },
    example: ({ text, position, pointer }) =>
      html`<script setup>
          import { MTooltip } from '@mozaic-ds/vue';
        </script>

        <MTooltip
          id="tooltip-id"
          text=${text}
          position=${position}
          :pointer=${pointer}
        >
          <span>Hover me</span>
        </MTooltip>`,
  },
);