<template>
	<section class="py-16 px-6 xl:container mx-auto">
		<details open class="group bg-white rounded-xl shadow-md p-6">
			<summary class="cursor-pointer flex justify-between items-center">
				<h3 class="text-2xl font-bold">Technische Details</h3>
				<svg
					class="w-5 h-5 transition-transform duration-200 group-open:rotate-180"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
				</svg>
			</summary>
			<div class="pt-6">
				<dl class="grid grid-cols-1 sm:grid-cols-2 gap-6">
					<div v-for="(value, label) in specs" :key="label" class="border-b border-gray-100 pb-3">
						<dt class="text-gray-500 text-sm">{{ label }}</dt>
						<dd class="font-medium text-gray-900 mt-1">{{ value }}</dd>
					</div>
				</dl>
			</div>
		</details>
	</section>
</template>

<script setup lang="ts">
defineProps<{
	specs: Record<string, string>;
}>();
</script>
