<template>
  <div class="flex items-center">
    <div 
      class="mr-2 h-2.5 w-2.5 rounded-full" 
      :class="{
        'bg-green-500': status.color === 'green',
        'bg-red-500': status.color === 'red',
        'bg-orange-500': status.color === 'orange',
        'bg-blue-500': status.color === 'blue',
        'bg-gray-500': status.color === 'gray'
      }"
    ></div>
    <span 
      class="text-sm"
      :class="{
        'text-green-700': status.color === 'green',
        'text-red-700': status.color === 'red',
        'text-orange-700': status.color === 'orange',
        'text-blue-700': status.color === 'blue',
        'text-gray-700': status.color === 'gray'
      }"
    >{{ status.label }}</span>
  </div>
</template>

<script>
export default {
  name: 'StatusIndicator',
  props: {
    status: {
      type: Object,
      required: true,
      default: () => ({
        label: '未知',
        color: 'gray'
      })
    }
  }
}
</script> 