package component

type CarouselEntry struct {
	ImgPath string
	Title string
	Text string
}

func getEntry(arr []CarouselEntry, index int) CarouselEntry {
	newIndex := index
	for newIndex < 0 {
		newIndex += len(arr)
	}
	newIndex = newIndex % len(arr)
	return arr[newIndex]
}

templ Carousel(elm []CarouselEntry , index int) {
	<div id="carousel-parent">
		<div class="flex items-center gap-x-13 md:gap-x-28 lg:gap-x-52 2xl:gap-x-96 xl:text-lg">

			<div class="relative z-10">
				<button class="top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black	"
					hx-post="/carousel/previous"
					hx-trigger="click"
					hx-target="#carousel-parent"
					>
					<img src={getEntry(elm, index - 1).ImgPath} class="h-28 w-56 md:h-40 md:w-80 xl:h-64 xl:w-156 rounded object-cover bg-neutral-800"/>
				</button>
			</div>

			<div class="relative text-center z-20">
				<img src={getEntry(elm, index).ImgPath} class="h-32 w-64 md:h-48 md:w-96 xl:h-82 xl:w-164 rounded object-cover bg-neutral-800"/>
				<div class="bg-gradient-to-t from-black/30 absolute bottom-0 left-0 h-32 w-64 md:h-48 md:w-96 xl:h-82 xl:w-164 rounded"></div>
				<p class="absolute text-neutral-300 bottom-0.5 left-5">{getEntry(elm, index).Title}</p>
			</div>

			<div class="relative z-0">
				<button class="top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2	"
					hx-post="/carousel/next"
					hx-trigger="click"
					hx-target="#carousel-parent"
					>
					<img src={getEntry(elm, index + 1).ImgPath} class="h-28 w-56 md:h-40 md:w-80 xl:h-64 xl:w-156 rounded object-cover bg-neutral-800"/>
				</button>
			</div>

		</div>
		<p class="text-center font-thin">{getEntry(elm, index).Text}</p>
	</div>
}
