package components

import "fmt"
import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"

templ likeButton() {
	<button class="hover:cursor-pointer">
		<svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path
				d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
				fill="currentColor"
			></path>
		</svg>
	</button>
}

templ RecipeCardSmall(recipe domain.Recipe) {
	<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
		<img class="size-52 md:size-48 rounded-sm" src=""/>
		<div class="w-full mt-8">
			<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
				{ recipe.Title }
			</h2>
			<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
				Serves { recipe.Serves }
			</p>
			<div class="flex items-end justify-between">
				<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
					{ recipe.Category } - { recipe.Duration.Total } mins
				</p>
				if recipe.Favorite {
					@likeButton()
				}
			</div>
			<button
				hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
				hx-trigger="click"
				hx-swap="none"
				class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
			>
				Make Now!
			</button>
		</div>
	</div>
}

templ ContentCardSmall(content, target string) {
	<div class="flex flex-col items-center justify-center rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
		<div class="mt-8 w-52 md:w-48 text-center">
			<a class="underline" href={ templ.SafeURL(target) }>
				<p class="text-sm">{ content }</p>
			</a>
		</div>
	</div>
}

// TODO: Implement this using a recipe type parameter!
templ RecipeCardLarge(liked bool) {
	<div class="w-9/10 md:w-2/5 flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4">
		<img class="size-80 md:size-64 rounded-sm" src=""/>
		<div class="mt-8">
			<h2 class="font-semibold">Avocado Toast</h2>
			<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
				Hayden Hargreaves
			</p>
			<p class="text-sm overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:4] my-2">
				Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
				make the BEST avocado toast with this recipe, plus fun variations.
				Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
				make the BEST avocado toast with this recipe, plus fun variations.
				Avocado toast is a delicious and simple breakfast, snack or light meal! Learn how to
				make the BEST avocado toast with this recipe, plus fun variations.
			</p>
			<div class="flex items-center justify-between">
				<p class="text-xs my-2 bg-gray-200 rounded-lg w-fit px-2 py-1 mt-2">
					Breakfast - 15 min
				</p>
				if liked {
					@likeButton()
				}
			</div>
			<button
				class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200"
			>
				Make Now!
			</button>
		</div>
	</div>
}