package ui

import "fmt"

type AnimeCardProps struct {
	ID       int
	Title    string
	ImageURL string
	// Options to customize the card behavior
	Class       string // override default wrapper class
	ImgClass    string // override default image class
	TitleClass  string // override default title class
	CurrentNode bool   // if true, renders a div instead of an anchor tag (useful for graph nodes)
}

templ AnimeCard(props AnimeCardProps) {
	if props.CurrentNode {
		<div class={ defaultString(props.Class, "min-w-0") }>
			@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
			<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
				{ props.Title }
			</div>
			{ children... }
		</div>
	} else {
		<a href={ templ.URL(fmt.Sprintf("/anime/%d", props.ID)) } class={ defaultString(props.Class, "flex flex-col bg-transparent text-inherit no-underline") }>
			@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
			
			if props.Class != "notification-card" && props.Class != "schedule-card" {
				<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
					{ props.Title }
				</div>
			}
			{ children... }
		</a>
	}
}

templ animeCardPoster(imageURL, title, imgClass string) {
	<div class="flex h-full w-full aspect-2/3 max-h-(--poster-max-height) justify-center overflow-hidden">
		if imageURL != "" {
			<img src={ imageURL } alt={ title } class={ defaultString(imgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
		} else {
			<div class="flex h-full w-full justify-center overflow-hidden text-transparent">No image</div>
		}
	</div>
}

func defaultString(val, fallback string) string {
	if val == "" {
		return fallback
	}
	return val
}