---
import { Image } from "astro:assets"
import { type ImageMetadata } from "astro"
import BadgeList from "../badge/BadgeList.astro"

interface Props {
  title: string
  description: string
  tags: string[]
  image: ImageMetadata
  imageAlt: string
  linkTo: string
}

const { title, description, tags, image, imageAlt, linkTo } = Astro.props
---

<a
  href={linkTo}
  class="card bg-base-100 max-w-96 shadow-xl hover:scale-105 transition"
>
  <figure>
    <Image src={image} alt={imageAlt} />
  </figure>
  <div class="card-body">
    <h2 class="card-title">
      {title}
    </h2>
    <p>{description}</p>
    <BadgeList tags={tags} />
  </div>
</a>