<template>
    <div class="mb-10 ms-4 shadow-2xl p-2">
        <span
            class="absolute -mt-1 flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-4 ring-white dark:ring-zinc-900 dark:bg-blue-900">
            <IconBook class="size-5 text-zinc-100" />
        </span>
        <div v-if="instance.active">
            <ActivityTile :instance="instance.target" />
            <div class="p-2">
                <UserProfile :user="instance.user" class="mt-2" />
                <div class="flex justify-between items-end mt-4">
                    <IdeaStepStatus :instance="instance" />
                    <time class="block mt-2 text-xs font-normal leading-none text-zinc-400 dark:text-zinc-500">{{
                        toPersianNumbers(instance.persian_date) }}</time>
                </div>
            </div>
        </div>
        <button v-else type="button" @click="instance.active = true">
            <span class="pb-1 px-4 bg-gray-700 text-gray-200 rounded-lg">...</span>
        </button>

    </div>
</template>

<script setup>
const { $toPersianNumbers } = useNuxtApp();
const toPersianNumbers = $toPersianNumbers;
const props = defineProps(['instance'])
const instance = props.instance
const id = useRoute().params.id
</script>