package search

import "projectreshoot/pkg/tmdb"
import "fmt"

templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
	for _, movie := range movies.Results {
		<div
			class="bg-surface0 p-4 rounded-lg shadow-lg flex 
            items-start space-x-4"
		>
			<img
				src={ movie.GetPoster(image, "w92") }
				alt="Movie Poster"
				class="rounded-lg object-cover"
				width="96"
				height="144"
				onerror="this.onerror=null; setFallbackColor(this);"
			/>
			<script>
                function setFallbackColor(img) {
                    const baseColor = getComputedStyle(document.documentElement).
                        getPropertyValue('--base').trim();
                        img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
                }
            </script>
			<div>
				<a
					href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
					class="text-xl font-semibold transition hover:text-green"
				>{ movie.Title } { movie.ReleaseYear() }</a>
				<p class="text-subtext0">
					Released: 
					<span class="font-medium">{ movie.ReleaseDate }</span>
				</p>
				<p class="text-subtext0">
					Original Title: 
					<span class="font-medium">{ movie.OriginalTitle }</span>
				</p>
				<p class="text-subtext0">{ movie.Overview }</p>
			</div>
		</div>
	}
}