package ui

import (
	"fmt"
	"mal/integrations/jikan"
)

templ InfiniteAnimeList(animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, nextURL string, containerID string) {
	for _, anime := range animes {
		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
			@CatalogItem(anime, watchlistStatuses[anime.MalID])
		</div>
	}
	if hasNext {
		<div class="col-span-full h-px w-full" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
	}
	<script src="/dist/static/dedupe.js" data-container={ containerID } defer></script>
}

templ CatalogItem(anime jikan.Anime, watchlistStatus string) {
	@AnimeCard(AnimeCardProps{
		ID:              anime.MalID,
		Title:           anime.DisplayTitle(),
		ImageURL:        anime.ImageURL(),
		TitleEnglish:    anime.TitleEnglish,
		TitleJapanese:   anime.TitleJapanese,
		Airing:          anime.Airing,
		Synopsis:        anime.Synopsis,
		PlayHref:        fmt.Sprintf("/watch/%d/1", anime.MalID),
		WatchlistStatus: watchlistStatus,
	})
}