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

const {current: d} = useWeather();
</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>
