package main

import "strconv"

// tracklistComponent renders the track table. Rows wrap on small screens so
// duration is never dropped (UAT 7.6).
templ tracklistComponent(data TracklistData) {
	<section class="y2k-bevel rounded-xl overflow-hidden bg-card my-6" data-block-key="y2k:tracklist">
		<header class="y2k-chrome-bg px-4 py-2 text-foreground uppercase tracking-wider text-xs">
			tracklist
		</header>
		if len(data.Tracks) == 0 {
			<p class="px-4 py-6 text-center text-muted-foreground">No tracks yet.</p>
		} else {
			<ol class="divide-y divide-border">
				for i, t := range data.Tracks {
					<li class="flex flex-wrap items-center gap-3 px-4 py-3">
						<span class="w-6 shrink-0 text-muted-foreground text-sm tabular-nums">{ strconv.Itoa(i + 1) }</span>
						<span class="flex-1 min-w-0 truncate text-foreground">
							if t.URL != "" {
								<a href={ templ.SafeURL(t.URL) } class="hover:underline">{ trackTitleOr(t.Title) }</a>
							} else {
								{ trackTitleOr(t.Title) }
							}
						</span>
						<span class="text-muted-foreground text-sm tabular-nums whitespace-nowrap">{ durationOrDash(t.Duration) }</span>
					</li>
				}
			</ol>
		}
	</section>
}

func durationOrDash(s string) string {
	if s == "" {
		return "--:--"
	}
	return s
}