<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {api} from '../services/api';
import MetricRow from './MetricRow.vue';

const d = ref<any>(null);
onMounted(async () => d.value = await api.current());
</script>

<template>
	<div class="card" v-if="d">
		<div class="card-title">💨 Air Quality</div>

		<MetricRow label="AQI" :value="d.air_quality" metric-key="air_quality" :data="d" />
		<MetricRow label="Label" :value="d.air_quality_label" />
		<MetricRow label="Resistance (Ohms)" :value="d.air_quality_ohms?.toLocaleString()" metric-key="air_quality_ohms" :data="d" />
	</div>
</template>
