<template>
	<div class="space-y-6">
		<!-- Address -->
		<div v-if="showAddress" class="flex items-start gap-3">
			<IconMapPin class="w-6 h-6 mt-1 text-gray-600 flex-shrink-0" />
			<div>
				<p class="font-semibold text-lg">{{ address.name }}</p>
				<p>{{ address.street }}</p>
				<p>{{ address.postalCode }} {{ address.city }}</p>
			</div>
		</div>

		<!-- OpenStreetMap Embed -->
		<div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg">
			<iframe
				:src="mapUrl"
				width="100%"
				height="100%"
				style="border: 0"
				allowfullscreen=""
				loading="lazy"
				class="absolute inset-0"
			></iframe>
		</div>

		<!-- Directions Link -->
		<a :href="directionsUrl" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-gray-900 font-medium hover:underline">
			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
			</svg>
			Route planen
		</a>
	</div>
</template>

<script setup lang="ts">
import IconMapPin from "~/components/icons/IconMapPin.vue";

const props = defineProps<{
	address: {
		name: string;
		street: string;
		postalCode: string;
		city: string;
	};
	showAddress?: boolean;
}>();

// OpenStreetMap embed — hardcoded coordinates for Rotenbergstraße 39, 70190 Stuttgart
const lat = 48.7862;
const lon = 9.2;
const bbox = `${lon - 0.005},${lat - 0.0025},${lon + 0.005},${lat + 0.0025}`;

const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lon}`;

const encodedAddress = computed(() => encodeURIComponent(`${props.address.street}, ${props.address.postalCode} ${props.address.city}`));
const directionsUrl = computed(() => `https://www.openstreetmap.org/directions?to=${lat},${lon}#map=16/${lat}/${lon}`);
</script>
