package book

import "fmt"

templ Book(params BookParams) {
	<style>
        .hide {
            display: none;
        }
        .book:hover + .hide {
            display: block;
        }
    </style>
	<div class="relative inline-block">
		<img
			alt={ fmt.Sprintf("%s's spine", params.Title) }
			src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/SIDE/XL", params.Yes24Id)) }
			class="book w-6"
		/>
		<div class="hide absolute top-10 left-5 border bg-white z-10">
			<div class="flex gap-2 w-96">
				<div class="w-3/4">
					<h2>{ params.Title }</h2>
					<h4>By { params.Author }</h4>
					<p>{ params.Description }</p>
				</div>
				<img
					class="w-1/4 h-fit"
					src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/XL", params.Yes24Id)) }
				/>
			</div>
		</div>
	</div>
}