package main

import "fmt"

// issueArchiveComponent renders a numbered archive list.
// Unknown / empty bucket → renders an empty-state message, no broken markup.
templ issueArchiveComponent(data IssueArchiveData, items []map[string]any) {
	<nav data-block="magazine-bold:issue_archive" class="py-6">
		<div class="font-mono text-kicker text-muted-foreground mb-6">Issue Archive</div>
		if len(items) == 0 {
			<p class="font-mono mb-caption">No issues yet.</p>
		} else {
			<ol class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4">
				for i, item := range items {
					if i >= max(1, data.Limit) {
						{{ break }}
					}
					<li class="flex items-baseline gap-4 mb-hairline-bottom py-3">
						<span class="font-mono text-kicker text-muted-foreground w-10">{ fmt.Sprintf("%02d", i+1) }</span>
						<span class="font-display flex-1 text-foreground">
							if title, ok := item["title"].(string); ok {
								{ title }
							} else if name, ok := item["name"].(string); ok {
								{ name }
							} else {
								Untitled issue
							}
						</span>
						if date, ok := item["date"].(string); ok && date != "" {
							<span class="font-mono mb-caption">{ date }</span>
						}
					</li>
				}
			</ol>
		}
	</nav>
}