/**
 * Code Connect mapping for MField
 * Links Figma _Field label to @mozaic-ds/vue
 *
 * MField is a wrapper that encompasses form inputs. The default slot accepts any
 * form component: MTextInput, MTextArea, MSelect, MCombobox, MPasswordInput,
 * MPhoneNumber, MPincode, MQuantitySelector, etc.
 */
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=6-29469',
  {
    props: {
      label: figma.string('Label'),
      requirementText: figma.enum('Necessity indicator', {
        True: 'required',
        False: '',
      }),
    },
    example: ({ label, requirementText }) =>
      html`<script setup>
          import { MField, MTextInput } from '@mozaic-ds/vue';
        </script>

        <MField
          id="field-id"
          label=${label}
          requirement-text=${requirementText}
        >
          <MTextInput id="field-id" placeholder="Placeholder"></MTextInput>
        </MField>`,
  },
);