@namespace MidrandBooks.Components
@using Microsoft.AspNetCore.Components
@using MidrandBooks.Models

<div id="book-card-@Book.Id" class="group relative flex flex-col justify-between rounded-2xl border border-slate-200/60 bg-white p-3 shadow-sm transition-all hover:shadow-md hover:-translate-y-0.5">
    
    <!-- Cover Artwork Block -->
    <div class="relative aspect-[3/4] rounded-xl overflow-hidden shadow-sm bg-slate-50 cursor-pointer" @onclick="HandleSelect">
        @if (!string.IsNullOrEmpty(Book.CoverUrl))
        {
            <img src="@Book.CoverUrl" 
                 alt="@Book.Title" 
                 referrerpolicy="no-referrer"
                 class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
        }
        else
        {
            <div class="h-full w-full bg-gradient-to-br @(Book.CoverColor) p-4 flex flex-col justify-between text-white transition-transform duration-500 group-hover:scale-105">
                <div class="absolute top-0 right-0 h-16 w-16 bg-white/5 rounded-full blur-sm pointer-events-none" />
                <span class="text-[8px] font-mono font-bold tracking-widest block uppercase text-white/40">@Book.Category</span>
                <span class="text-sm font-serif font-extrabold line-clamp-3 leading-tight text-white">@Book.Title</span>
                <span class="text-[9px] font-sans text-white/70 truncate block font-semibold">By @Book.Author</span>
            </div>
        }

        <!-- Book Spine Shadow -->
        <div class="absolute top-0 bottom-0 left-0 w-2 bg-gradient-to-r from-black/25 to-transparent" />

        <!-- Formats and Badges -->
        <div class="absolute top-2 right-2 flex flex-col gap-1 items-end z-10">
            @if (Book.Bestseller)
            {
                <span class="px-2 py-0.5 rounded-full text-[8px] font-mono font-extrabold uppercase bg-amber-500 text-slate-900 border border-amber-400 shadow-sm">
                    Bestseller
                </span>
            }
            @if (Book.Trending)
            {
                <span class="px-2 py-0.5 rounded-full text-[8px] font-mono font-extrabold uppercase bg-violet-600 text-white border border-violet-500 shadow-sm">
                    Trending
                </span>
            }
        </div>
    </div>

    <!-- Info Block -->
    <div class="mt-3 flex-1 flex flex-col justify-between space-y-2">
        <div>
            <span class="text-[9px] font-mono font-bold text-violet-600 uppercase tracking-wider block">@Book.Category</span>
            <h4 class="font-serif text-sm font-bold text-slate-800 leading-tight line-clamp-1 mt-0.5 hover:text-violet-600 cursor-pointer" @onclick="HandleSelect">
                @Book.Title
            </h4>
            <span class="text-[10px] text-slate-500 font-medium">@Book.Author</span>
        </div>

        <div class="flex items-center justify-between border-t border-slate-100 pt-2">
            <div>
                <span class="text-[8px] font-mono font-bold text-slate-400 block uppercase">South African Price</span>
                <span class="font-mono text-xs font-bold text-slate-900">R @Book.Price.ToString("F2")</span>
            </div>

            <div class="flex items-center gap-1.5">
                <span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-amber-50 text-amber-700 text-[10px] font-mono font-bold border border-amber-200/50">
                    ★ @Book.Rating.ToString("F1")
                </span>
                <span class="text-[9px] font-mono text-slate-400">(@Book.ReviewsCount)</span>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public BookModel Book { get; set; } = new();
    [Parameter] public EventCallback<BookModel> OnSelectBook { get; set; }

    private async Task HandleSelect()
    {
        await OnSelectBook.InvokeAsync(Book);
    }
}