package main

// menuBoardComponent renders a Coffee-styled menu board.
templ menuBoardComponent(data MenuBoardData) {
	<section data-block="coffee:menu_board" class="my-10">
		<div class="coffee-card max-w-3xl mx-auto px-6 py-8">
			if data.Title != "" {
				<h2 class="coffee-display text-3xl mb-6 text-center">
					<span class="coffee-doodle-underline">{ data.Title }</span>
				</h2>
			}
			if len(data.Sections) == 0 {
				<p class="coffee-body text-sm text-muted-foreground text-center italic">Add a section to get started.</p>
			}
			for sIdx, section := range data.Sections {
				<div class={ menuSectionClass(sIdx) }>
					if section.Name != "" {
						<h3 class="coffee-display text-xl mb-3 text-primary">{ section.Name }</h3>
					}
					if len(section.Items) == 0 {
						<p class="coffee-body text-sm text-muted-foreground italic">No items yet.</p>
					}
					<ul class="space-y-2">
						for _, item := range section.Items {
							<li class="flex items-baseline gap-3 py-1 border-b coffee-pencil-rule border-dashed">
								<div class="flex-1 min-w-0">
									<div class="coffee-body font-medium text-foreground">{ item.Name }</div>
									if item.Note != "" {
										<div class="coffee-body text-sm text-muted-foreground">{ item.Note }</div>
									}
									if item.Allergens != "" {
										<div class="coffee-body text-xs text-muted-foreground italic">Allergens: { item.Allergens }</div>
									}
								</div>
								if item.Price != "" {
									<div class="coffee-price price text-base whitespace-nowrap">{ item.Price }</div>
								}
							</li>
						}
					</ul>
				</div>
			}
		</div>
	</section>
}

// menuSectionClass returns the CSS class for a section, leaving the first
// section without a top margin and adding spacing between later sections.
func menuSectionClass(idx int) string {
	if idx == 0 {
		return "mb-6"
	}
	return "mt-8 mb-6"
}