<template>
    <div class="relative">
        <button
            type="button"
            class="relative rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 hover:border-slate-300"
            @click="open = !open"
        >
            Notifications
            <span
                v-if="unreadCount > 0"
                class="absolute -right-1 -top-1 rounded-full bg-rose-500 px-1.5 text-[10px] text-white"
            >
                {{ unreadCount }}
            </span>
        </button>

        <div
            v-if="open"
            class="absolute right-0 mt-2 w-80 rounded-xl border border-slate-200 bg-white p-4 shadow-lg"
        >
            <div class="flex items-center justify-between">
                <p class="text-sm font-semibold">Notifications</p>
                <button
                    class="text-xs font-semibold text-slate-500 hover:text-slate-700"
                    type="button"
                    @click="open = false"
                >
                    Close
                </button>
            </div>
            <div class="mt-4 space-y-3">
                <div
                    v-for="item in notifications"
                    :key="item.id"
                    class="flex items-start gap-3 rounded-lg border border-slate-100 p-3"
                >
                    <span
                        class="mt-1 h-2.5 w-2.5 rounded-full"
                        :class="badgeColor(item.type)"
                    ></span>
                    <div class="flex-1">
                        <p class="text-xs text-slate-700">{{ item.detail }}</p>
                        <p class="mt-1 text-[11px] text-slate-400">
                            {{ item.time }}
                        </p>
                    </div>
                    <span
                        v-if="!item.read"
                        class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600"
                    >
                        New
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    notifications: {
        type: Array,
        default: () => [],
    },
});

const open = ref(false);
const unreadCount = computed(
    () => props.notifications.filter((item) => !item.read).length
);

const badgeColor = (type) => {
    const colors = {
        birthday: 'bg-amber-500',
        commented: 'bg-sky-500',
        friend_request: 'bg-emerald-500',
        following: 'bg-indigo-500',
        reaction_love: 'bg-rose-500',
    };
    return colors[type] ?? 'bg-slate-400';
};
</script>
