package main

// reservationComponent renders the sticky reservation strip.
// Empty inputs render a shell with a "Reservations" label so the strip is never blank.
templ reservationComponent(data ReservationData) {
	<div
		data-block="art-deco:reservation"
		class="sticky top-0 z-30 w-full deco-grain"
		style="background-color: hsl(var(--foreground)); color: hsl(var(--background)); border-bottom: 1px solid hsl(var(--primary));"
	>
		<div class="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-2 text-sm">
			<div class="flex items-center gap-3 deco-caps" style="font-family: var(--font-heading, &quot;Italiana&quot;, &quot;Cinzel&quot;, Georgia, serif); color: hsl(var(--primary));">
				<span>Reservations</span>
				if data.Phone != "" {
					<span aria-hidden="true" style="color: hsl(var(--primary) / 0.5);">·</span>
					<a href={ templ.SafeURL("tel:" + data.Phone) } class="deco-link" style="border-bottom-color: hsl(var(--primary));">{ data.Phone }</a>
				}
			</div>
			if len(data.Hours) > 0 {
				<div class="flex flex-wrap items-center gap-3" style="color: hsl(var(--background));">
					for i, line := range data.Hours {
						if i > 0 {
							<span aria-hidden="true" style="color: hsl(var(--primary) / 0.5);">·</span>
						}
						<span>{ line }</span>
					}
				</div>
			}
			if data.OpenTable != "" {
				<a href={ templ.SafeURL(data.OpenTable) } class="deco-pill" style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary));">
					Book a Table
				</a>
			}
		</div>
	</div>
}