---
import TagRow from "@component/tagRow"

const { id, title, description, tags, image } = Astro.props

---

<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" >{title}</p>
        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->

        <div id="tag-row" class="line-clamp-1">
            <TagRow tags={tags}/>
        </div>
    </div>

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