<script setup>
import VitalTrendChart from './VitalTrendChart.vue'

defineProps({
  observations: { type: Array, required: true },
  medications: { type: Array, default: () => [] },
})

const charts = [
  { code: 'HEART_RATE', title: 'Heart Rate (bpm)', yMin: 30, yMax: 180 },
  { code: 'RESP_RATE', title: 'Respiratory Rate (/min)', yMin: 0, yMax: 40 },
  { code: 'SYSTOLIC_BP', title: 'Systolic BP (mmHg)', yMin: 60, yMax: 250 },
  { code: 'SPO2', title: 'SpO₂ (%)', yMin: 80, yMax: 100 },
  { code: 'TEMP_C', title: 'Temperature (°C)', yMin: 34, yMax: 42 },
]
</script>

<template>
  <div class="grid w-full min-w-0 grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
    <VitalTrendChart
      v-for="chart in charts"
      :key="chart.code"
      :observations="observations"
      :medications="medications"
      :code="chart.code"
      :title="chart.title"
      :y-min="chart.yMin"
      :y-max="chart.yMax"
    />
  </div>
</template>
