package main

// locationCardComponent renders a location card with doodled pin overlay.
templ locationCardComponent(data LocationCardData) {
	<section data-block="coffee:location_card" class="my-8">
		<div class="coffee-card max-w-3xl mx-auto p-6 grid gap-6 md:grid-cols-2">
			<div class="relative aspect-[4/3] overflow-hidden rounded-sm bg-secondary">
				if data.MapImage != "" {
					<img src={ data.MapImage } alt="Map of our location" class="absolute inset-0 w-full h-full object-cover" loading="lazy"/>
				} else {
					<div class="absolute inset-0 flex items-center justify-center coffee-body text-sm text-muted-foreground italic">
						Map preview
					</div>
				}
				<svg class="coffee-pin absolute top-1/3 left-1/2 -translate-x-1/2 w-10 h-10" viewBox="0 0 40 56" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
					<path d="M20 4 Q 6 4 6 22 Q 6 36 20 52 Q 34 36 34 22 Q 34 4 20 4 Z"></path>
					<circle cx="20" cy="22" r="6"></circle>
				</svg>
			</div>
			<div class="flex flex-col gap-3 justify-center">
				<h3 class="coffee-display text-2xl text-primary">
					<span class="coffee-doodle-underline">Find us</span>
				</h3>
				if data.Address != "" {
					<address class="coffee-body not-italic text-foreground whitespace-pre-line">{ data.Address }</address>
				} else {
					<p class="coffee-body text-sm text-muted-foreground italic">Add an address to render the location card.</p>
				}
				if data.DirectionsURL != "" {
					<a href={ templ.SafeURL(data.DirectionsURL) } class="kraft-tag mt-2 self-start" target="_blank" rel="noopener noreferrer">Directions</a>
				}
			</div>
		</div>
	</section>
}