package main

// menuComponent renders the symmetric two-column menu card.
templ menuComponent(data MenuData) {
	<section data-block="art-deco:menu" class="py-16">
		<div class="max-w-3xl mx-auto px-4">
			<div class="deco-frame text-center" style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground));">
				if data.Title != "" {
					<h2
						class="deco-caps deco-underline mb-8 text-3xl md:text-4xl"
						style="font-family: var(--font-heading, &quot;Italiana&quot;, &quot;Cinzel&quot;, Georgia, serif); color: hsl(var(--foreground));"
					>
						{ data.Title }
					</h2>
				}
				if len(data.Courses) == 0 {
					<p class="text-muted-foreground" style="color: hsl(var(--muted-foreground));">Add courses to start composing this menu.</p>
				} else {
					<ul class="space-y-6 text-left">
						for _, course := range data.Courses {
							<li class="flex items-start justify-between gap-6 border-b" style="border-color: hsl(var(--border));">
								<div class="flex-1">
									<h3
										class="deco-caps text-lg"
										style="font-family: var(--font-heading, &quot;Italiana&quot;, &quot;Cinzel&quot;, Georgia, serif); color: hsl(var(--foreground));"
									>
										{ course.Name }
									</h3>
									if course.Description != "" {
										<div class="mt-1 italic" style="color: hsl(var(--muted-foreground));">
											@templ.Raw(course.Description)
										</div>
									}
								</div>
								if course.Price != "" {
									<span
										class="deco-caps text-base"
										style="font-family: var(--font-mono, &quot;JetBrains Mono&quot;, ui-monospace, monospace); color: hsl(var(--primary));"
									>
										{ course.Price }
									</span>
								}
							</li>
						}
					</ul>
				}
			</div>
		</div>
	</section>
}