<script setup lang="ts">
import { ref } from 'vue';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

defineProps<{
    checkInPhotoUrl: string | null;
    checkOutPhotoUrl: string | null;
}>();

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

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

<template>
    <div v-if="checkInPhotoUrl || checkOutPhotoUrl" class="flex flex-wrap gap-2">
        <button v-if="checkInPhotoUrl" type="button" class="group flex flex-col items-center gap-1"
            @click="openPreview(checkInPhotoUrl, 'Foto Presensi Masuk')">
            <img :src="checkInPhotoUrl" alt="Foto presensi masuk"
                class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80" />
            <span class="text-muted-foreground text-[10px] font-medium">Masuk</span>
        </button>

        <button v-if="checkOutPhotoUrl" type="button" class="group flex flex-col items-center gap-1"
            @click="openPreview(checkOutPhotoUrl, 'Foto Presensi Pulang')">
            <img :src="checkOutPhotoUrl" alt="Foto presensi pulang"
                class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80" />
            <span class="text-muted-foreground text-[10px] font-medium">Pulang</span>
        </button>
    </div>

    <span v-else class="text-muted-foreground">-</span>

    <Dialog v-model:open="previewOpen">
        <DialogContent class="sm:max-w-2xl">
            <DialogHeader>
                <DialogTitle>{{ previewTitle }}</DialogTitle>
            </DialogHeader>

            <div class="space-y-3">
                <div class="overflow-hidden rounded-lg border bg-muted">
                    <img v-if="previewUrl" :src="previewUrl" :alt="previewTitle"
                        class="max-h-[70vh] w-full object-contain" />
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
