---
import { getImage } from "astro:assets";
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";

export interface Props {
  project: CollectionEntry<"projects">;
}

const { project } = Astro.props;

const bgImage = await getImage({
  format: "webp",
  src: project.data.image,
  width: 16,
  height: 16,
  quality: 0
});
---

<a href={`/projects/${project.id}/`}>
  <article>
    <div style={{ "background-image": `url("${bgImage.src}")` }}>
      <Image
        class="thumbnail"
        transition:name={`project-img-${project.id}`}
        src={project.data.image}
        densities={[1, 1.5, 2]}
        width={400}
        role="presentation"
        alt=""
      />
    </div>
    <div>
      <h3 class="project-name">{project.data.name}</h3>
      <small>{project.data.tags.join(", ")}</small>
      <p>{project.data.summary}</p>
    </div>
  </article>
</a>

<style>
  :not(.project-name) {
    text-decoration: none !important;
  }

  small {
    margin: 0 var(--1);
    display: block;
    text-wrap: balance;
  }

  h3 {
    margin: var(--1) var(--1) 0 var(--1);
  }

  p {
    margin: var(--1);
  }

  article {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text);
    background-color: var(--secondary);
    border-radius: 5px;
  }

  a {
    transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;
  }

  a:hover {
    transform: translateY(calc(5px * -1));
  }

  a:hover img {
    transform: scale(1.02);
  }

  span {
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 125%;
    background-position: center;
  }

  div {
    overflow: hidden;
    position: relative;
  }

  img,
  div:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  img {
    position: relative;
    object-fit: contain;
    width: 100%;
    height: auto;
    transition: transform ease-in-out 0.4s;
    height: var(--14);
    backdrop-filter: blur(100px);
  }
</style>