<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    checkInLat: number | null;
    checkInLng: number | null;
    checkOutLat: number | null;
    checkOutLng: number | null;
}>();

const hasCoordinates = computed(() => props.checkInLat != null && props.checkInLng != null);

const checkInSrc = computed(() => {
    if (props.checkInLat == null || props.checkInLng == null) {
        return '';
    }

    return `https://www.google.com/maps?q=${props.checkInLat},${props.checkInLng}&z=18&t=k&output=embed`;
});

const checkOutSrc = computed(() => {
    if (props.checkOutLat == null || props.checkOutLng == null) {
        return '';
    }

    return `https://www.google.com/maps?q=${props.checkOutLat},${props.checkOutLng}&z=18&t=k&output=embed`;
});
</script>

<template>
    <div v-if="hasCoordinates" class="space-y-3">
        <p class="text-muted-foreground text-sm">
            Lokasi Presensi
        </p>

        <!-- Check-in map -->
        <div class="space-y-1.5">
            <p class="text-xs font-semibold text-emerald-600">Masuk</p>
            <div class="relative w-full overflow-hidden rounded-lg" style="padding-top: 56.25%">
                <iframe :src="checkInSrc" class="absolute inset-0 h-full w-full" style="border: 0" allowfullscreen
                    loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
            </div>
        </div>

        <!-- Check-out map -->
        <div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
            <p class="text-xs font-semibold text-destructive">Pulang</p>
            <div class="relative w-full overflow-hidden rounded-lg" style="padding-top: 56.25%">
                <iframe :src="checkOutSrc" class="absolute inset-0 h-full w-full" style="border: 0" allowfullscreen
                    loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
            </div>
        </div>
    </div>
</template>
