<template>
    <div class="card p-3 weather-card" v-if="forecast">
        <h2 class="h5 fw-semibold mb-3">🌤 Weather Forecast</h2>
        <div class="row align-items-center">
            <div class="col-auto">
                <p class="mb-1">🥶 Min: {{ forecast.Temperature.Minimum.Value }}°C</p>
                <p class="mb-0">🥵 Max: {{ forecast.Temperature.Maximum.Value }}°C</p>
            </div>
            <div class="col">
                <p class="mb-1"><strong>🌞 Day:</strong> {{ forecast.Day.IconPhrase }}</p>
                <p class="mb-0"><strong>🌙 Night:</strong> {{ forecast.Night.IconPhrase }}</p>
            </div>
        </div>
        <p class="mt-3 mb-0">
            <a :href="forecast.Link" target="_blank" class="small text-decoration-none">
                Full forecast ↗
            </a>
        </p>
    </div>
</template>
<script>
export default {
    name: "WeatherCard",
    data() {
        return {
            forecast: null,
        };
    },
    async mounted() {
        try {
            const res = await fetch("https://192.168.70.11:8000/weather/daily");
            const json = await res.json();
            this.forecast = json.data;
        } catch (error) {
            console.error("Failed to fetch weather forecast:", error);
        }
    },
};
</script>
<style scoped>
.weather-card {
    border-left: 5px solid #6b46c1;
    /* purple accent */
    border-radius: 0.375rem;
    /* rounded */
    box-shadow: 0 4px 8px rgba(107, 70, 193, 0.15);
    background: white;
}
</style>