<script setup lang="ts">
import { computed, ref } from 'vue';
import MediaPreviewDialog from '@/components/media/MediaPreviewDialog.vue';
import type { MediaItem } from '@/types/media';

const props = defineProps<{
    items: MediaItem[];
    maxVisible?: number;
}>();

const previewOpen = ref(false);
const previewUrl = ref<string | null>(null);

const visibleItems = computed(() => props.items.slice(0, props.maxVisible ?? 3));
const hiddenCount = computed(() => Math.max(props.items.length - visibleItems.value.length, 0));

function openPreview(url: string) {
    previewUrl.value = url;
    previewOpen.value = true;
}
</script>

<template>
    <div v-if="items.length" class="flex items-center gap-1">
        <button
            v-for="item in visibleItems"
            :key="item.id"
            type="button"
            class="size-8 overflow-hidden rounded border bg-muted/30"
            @click="openPreview(item.url)"
        >
            <img :src="item.thumb_url" alt="Foto" class="size-full object-cover">
        </button>
        <span v-if="hiddenCount > 0" class="text-muted-foreground text-xs">
            +{{ hiddenCount }}
        </span>
    </div>

    <MediaPreviewDialog v-model:open="previewOpen" :url="previewUrl" />
</template>
