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

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

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

function openPreview() {
    if (!props.items?.length) {
        return;
    }

    previewUrl.value = props.items[0].url;
    previewOpen.value = true;
}
</script>

<template>
    <button
        type="button"
        class="size-10 shrink-0 overflow-hidden rounded border bg-muted/30"
        :class="items?.length ? 'cursor-zoom-in' : 'cursor-default'"
        :disabled="!items?.length"
        @click.stop="openPreview"
    >
        <img
            v-if="items?.length"
            :src="items[0].thumb_url"
            alt="Foto varian"
            class="size-full object-cover"
        >
        <div
            v-else
            class="flex size-full items-center justify-center text-muted-foreground"
        >
            <Package class="size-4 opacity-40" />
        </div>
    </button>

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