<template>
    <div class="card p-3 weather-card" v-if="current">
        <h2 class="h5 fw-semibold mb-3">🌤 Current Weather</h2>
        <div class="row align-items-center">
            <div class="col-auto">
                <p class="mb-1">🌡 Temp: {{ current.Temperature.Metric.Value }}°C</p>
                <p class="mb-0">🤔 Feels Like: {{ current.RealFeelTemperature.Metric.Value }}°C</p>
            </div>
            <div class="col">
                <p class="mb-1">🌬 Wind: {{ current.Wind.Speed.Metric.Value }} km/h ({{ current.Wind.Direction.Localized }})</p>
                <p class="mb-0">💧 Humidity: {{ current.RelativeHumidity }}%</p>
            </div>
        </div>
        <p class="mt-3 mb-0">
            <a :href="current.Link || current.MobileLink" target="_blank" class="small text-decoration-none">
                Full current conditions ↗
            </a>
        </p>
    </div>
</template>
<script>
export default {
    name: "CurrentWeatherCard",
    data() {
        return {
            current: null,
            observationTime: null,
        };
    },
    async mounted() {
        try {
            const res = await fetch("https://192.168.70.11:8000/weather/current");
            const json = await res.json();
            this.current = json.data;
        } catch (error) {
            console.error("Failed to fetch current weather:", error);
        }
    },
};
</script>
<style scoped>
.weather-card {
    border-left: 5px solid #6b46c1;
    /* purple accent */
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(107, 70, 193, 0.15);
    background: white;
}
</style>