---
import client from "@/data/pocketbase"
import TagRow from "./TagRow.astro"

const { recipe } = Astro.props;

const headerImage = await client.collection("images").getOne(recipe.images[0])
const image = await client.files.getURL(headerImage, headerImage.image)
---

<div class="relative z-0 flex h-50">
    <img
        class="w-full h-full object-cover rounded-xl"
        src={ image }
    />

    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->

        <div id="tag-row" class="">
            <TagRow tagIds={recipe.tags}/>
        </div>
    </div>

    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
        <span class="block w-full h-full hover:bg-black/10 transition-colors">
        </span>
    </a>
    
</div>