<!--
  PillStatus — canonical bridge for Figma `Pill/Status`.
  Variants: Inactive · Preview · Live · Analyzing (semantic abstraction from MicroApp State Pill).

  BRIDGE-MOCKUP-003 (2026-05-19): ships code-first. Figma library will add
  matching Pill/Status component; once shipped, this canonical wrapper's
  data-figma-* attrs become live双向 trace anchors per AGENTS.md 硬规则 #6.
-->
<script setup lang="ts">
import { computed } from 'vue'
import Pill from '../components/Pill/Pill.vue'

type Status = 'Inactive' | 'Preview' | 'Live' | 'Analyzing'

const props = withDefaults(defineProps<{
  status?: Status
}>(), {
  status: 'Inactive',
})

const variantMapping = computed(() => {
  switch (props.status) {
    case 'Live':       return { bgColor: 'brand' as const, dotColor: 'brand' as const }
    case 'Preview':    return { bgColor: 'blue' as const,  dotColor: 'blue' as const }
    case 'Analyzing':  return { bgColor: 'blue' as const,  dotColor: 'blue' as const }
    case 'Inactive':
    default:           return { bgColor: 'grey' as const,  dotColor: 'grey' as const }
  }
})

const figmaAttrs = computed(() => ({
  'data-figma-component': 'Pill/Status',
  'data-figma-status': props.status,
}))
</script>

<template>
  <Pill
    v-bind="figmaAttrs"
    :bg-color="variantMapping.bgColor"
    :dot-color="variantMapping.dotColor"
  >
    <slot>{{ status }}</slot>
  </Pill>
</template>
