<template>
	<div class="space-y-4">
		<div class="flex items-start gap-3">
			<IconMapPin class="w-5 h-5 mt-1 text-gray-600 flex-shrink-0" />
			<div>
				<p class="font-semibold">{{ contact.name }}</p>
				<p>{{ contact.street }}</p>
				<p>{{ contact.postalCode }} {{ contact.city }}</p>
			</div>
		</div>

		<div class="flex items-center gap-3">
			<svg class="w-5 h-5 text-gray-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
				/>
			</svg>
			<a :href="`tel:${contact.phone.replace(/\s/g, '')}`" class="hover:underline">{{ contact.phone }}</a>
		</div>

		<div v-if="contact.fax" class="flex items-center gap-3">
			<svg class="w-5 h-5 text-gray-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
			</svg>
			<span>{{ contact.fax }}</span>
		</div>

		<div class="flex items-center gap-3">
			<svg class="w-5 h-5 text-gray-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
			</svg>
			<a :href="`mailto:${contact.email}`" class="hover:underline">{{ contact.email }}</a>
		</div>

		<div v-if="showVatId" class="flex items-center gap-3 text-sm text-gray-600">
			<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
			</svg>
			<span>USt-IdNr.: {{ contact.vatId }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import type { ContactInfo } from "~/composables/usePageContent";
import IconMapPin from "~/components/icons/IconMapPin.vue";

defineProps<{
	contact: ContactInfo;
	showVatId?: boolean;
}>();
</script>
