<template>
  <UCard>
    <template #header>
      <h4 class="font-medium">Scenarios</h4>
    </template>
    
    <div class="space-y-3">
      <USelect
        :model-value="scenario"
        :options="scenarioOptions"
        @update:model-value="setScenario"
      />
      
      <div v-if="scenario !== 'current'" class="p-3 bg-blue-50 border border-blue-200 rounded text-sm">
        <div class="flex items-center gap-2 text-blue-800">
          <UIcon name="i-heroicons-information-circle" class="w-4 h-4" />
          <span class="font-medium">Scenario Active</span>
        </div>
        <p class="text-blue-700 mt-1">
          {{ getScenarioDescription(scenario) }}
        </p>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { scenario, setScenario } = useCoopBuilder()

const scenarioOptions = [
  { label: 'Current', value: 'current' },
  { label: 'Quit Day Jobs', value: 'quit-jobs' },
  { label: 'Start Production', value: 'start-production' },
  { label: 'Custom', value: 'custom', disabled: true }
]

function getScenarioDescription(scenario: string): string {
  switch (scenario) {
    case 'quit-jobs':
      return 'All external income removed. Shows runway if everyone works full-time for the co-op.'
    case 'start-production':
      return 'Service revenue reduced by 30%. Models transition from services to product development.'
    case 'custom':
      return 'Custom scenario configuration coming soon.'
    default:
      return ''
  }
}
</script>