<script setup lang="ts">
import { getPromotionsOnDay } from '@/api/rank';
import { onMounted, ref } from 'vue';
import MemberCard from '../members/MemberCard.vue';
import Spinner from '../ui/spinner/Spinner.vue';
import { PromotionDetails } from '@shared/types/rank';


const props = defineProps<{
    date: Date
}>()

const promoList = ref<PromotionDetails[]>();
const loading = ref(true);

async function loadData() {
    promoList.value = await getPromotionsOnDay(props.date);
}

defineExpose({
    loadData
})

onMounted(async () => {
    // promoList.value = await getPromotionsOnDay(props.date);
    await loadData();
    loading.value = false;
})

</script>

<template>
    <div class="overflow-x-auto">
        <table v-if="!loading" class="min-w-full text-left border-collapse">
            <thead>
                <tr class="border-b-2 border-gray-200 bg-white/10">
                    <th class="px-4 py-3 text-sm font-semibold">Member</th>
                    <th class="px-4 py-3 text-sm font-semibold">Rank</th>
                    <th class="px-4 py-3 text-sm font-semibold">Approved By</th>
                    <th class="px-4 py-3 text-sm font-semibold text-right">Submitted By</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="p in promoList" :key="p.member_id" class="border-b transition-colors">
                    <td class="px-2 py-2">
                        <MemberCard :member-id="p.member_id" />
                    </td>
                    <td class="px-4 py-2 text-sm">
                        {{ p.short_name }}
                    </td>
                    <td class="px-2 py-2 text-sm text-right">
                        <MemberCard :member-id="p.authorized_by_id" />
                    </td>
                    <td class="px-2 py-2 text-sm text-right">
                        <MemberCard :member-id="p.created_by_id" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-else class="overflow-hidden mx-auto flex w-full">
            <Spinner class="size-7"></Spinner>
        </div>
    </div>
</template>