<template>
    <div class="card p-3 meme-card">
        <h2 class="h5 mb-3">🖼 Daily Meme</h2>
        <div v-if="loading" class="text-center text-muted">Loading meme...</div>
        <div v-else>
            <img :src="memeUrl" alt="Daily AI Meme" class="img-fluid rounded mt-3" />
        </div>
    </div>
</template>
<script>
export default {
    name: "DailyMemeCard",
    data() {
        return {
            memeUrl: "",
            loading: true,
        };
    },
    mounted() {
        this.fetchMeme();
    },
    methods: {
        async fetchMeme() {
            this.loading = true;
            try {
                const res = await fetch("https://192.168.70.11:8000/meme/daily");
                if (!res.ok) throw new Error(`HTTP error ${res.status}`);

                const data = await res.json();
                this.memeUrl = data.data.image || "";
            } catch (error) {
                console.error("Failed to fetch meme", error);
                this.memeUrl = "";
            } finally {
                this.loading = false;
            }
        },
    },
};
</script>
<style scoped>
.meme-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>