import figma from '@figma/code-connect'
import Badge from '../../canonical/Badge.vue'

figma.connect(
  Badge,
  'https://www.figma.com/design/<FIGMA_FILE_KEY>/?node-id=4821-1665',
  {
    imports: ["import { Badge } from '@nancyzeng0210/tvu-design-system'"],
    props: {
      color: figma.enum('Color', {
        Neutral: 'Neutral',
        Blue: 'Blue',
        Green: 'Green',
        Orange: 'Orange',
        Red: 'Red',
      }),
      tag: figma.enum('Tag', {
        Filled: 'Filled',
        Line: 'Line',
      }),
      type: figma.enum('Type', {
        Circle: 'Circle',
        Rectangle: 'Rectangle',
      }),
    },
    example: ({ color, tag, type }) =>
      `<Badge color="${color}" tag="${tag}" type="${type}">99+</Badge>`,
  },
)