<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

defineProps<{
    dynamicId: number;
    ledgers: Array<{
        id: number;
        name: string;
        score: number;
        media?: Array<{ id: number; url: string; mime_type: string }>;
    }>;
}>();
</script>

<template>
    <div class="mt-8">
        <div class="mb-6 flex items-center justify-between">
            <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                Ledgers
            </h4>
        </div>
        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            <li
                v-for="ledger in ledgers"
                :key="ledger.id"
                class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
            >
                <Link
                    :href="
                        route('dynamics.ledgers.show', {
                            dynamic: dynamicId,
                            ledger: ledger.id,
                        })
                    "
                >
                    <h5 class="text-lg font-semibold">
                        {{ ledger.name }}
                    </h5>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        Score: {{ ledger.score }}
                    </p>

                    <!-- Ledger Media Thumbnails -->
                    <div
                        v-if="ledger.media && ledger.media.length > 0"
                        class="mt-2 flex flex-wrap gap-1"
                    >
                        <div
                            v-for="item in ledger.media"
                            :key="item.id"
                            class="relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600"
                        >
                            <img
                                v-if="item.mime_type.startsWith('image/')"
                                :src="item.url"
                                class="size-full object-cover"
                            />
                            <video
                                v-else-if="item.mime_type.startsWith('video/')"
                                :src="item.url"
                                class="size-full object-cover"
                            />
                        </div>
                    </div>
                </Link>
            </li>
        </ul>
        <div v-if="ledgers.length === 0" class="mt-4 text-gray-500">
            No ledgers found for this dynamic.
        </div>
    </div>
</template>
