<!--
/**
 * Status List Component - Standardized Label/Value List Display
 * 
 * Reusable component for displaying status items in a consistent format
 * with optional status-based color coding
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div class="status-list">
    <div
      v-for="item in items"
      :key="item.label"
      class="status-item"
      :class="showStatusColors && item.status ? `status-${item.status}` : ''"
    >
      <div class="status-row">
        <span class="status-label">{{ item.label }}</span>
        <span 
          class="status-value" 
          :class="showStatusColors && item.status ? `value-${item.status}` : ''"
        >
          {{ item.value }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface StatusListItem {
  label: string
  value: string
  status?: 'success' | 'warning' | 'error' | 'info'
}

interface Props {
  items: StatusListItem[]
  showStatusColors?: boolean
}

defineProps<Props>()
</script>

<style scoped>
.status-list {
  display: flex;
  flex-direction: column;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.status-item:last-child {
  border-bottom: none;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.status-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.status-value {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.value-success {
  color: #4caf50;
}

.value-warning {
  color: #ff9800;
}

.value-error {
  color: #f44336;
}

.value-info {
  color: #2196f3;
}
</style>

