<template>
    <div class="card p-3 surprise-card">
        <h2 class="h6 text-purple mb-2">🎉 Surprise of the Day</h2>
        <p>{{ surprise || "Loading a fun surprise..." }}</p>
    </div>
</template>
<script>
export default {
    name: "SurpriseCard",
    data() {
        return {
            surprise: null,
        };
    },
    methods: {
        async fetchSurprise() {
            try {
                const res = await fetch("https://192.168.70.11:8000/surprise/daily");
                const data = await res.json();
                this.surprise = data.data;
            } catch (err) {
                console.error("Failed to fetch surprise:", err);
                this.surprise = "Oops! Couldn't load a surprise right now.";
            }
        },
    },
    mounted() {
        this.fetchSurprise();
    },
};
</script>
<style scoped>
.surprise-card {
    border-left: 5px solid #9f7aea;
    /* lighter purple accent */
    background: #f9f7ff;
    border-radius: 0.375rem;
    box-shadow: 0 4px 8px rgba(159, 122, 234, 0.15);
}

.text-purple {
    color: #6b46c1 !important;
    /* consistent purple text */
}
</style>