---
import { Image } from "astro:assets";
import backdrop from "@assets/backdrop.webp";
import type { CollectionEntry } from "astro:content";

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

const stringToNumber = (str: string, seed = 3) => {
  let h1 = 0xdeadbeef ^ seed,
    h2 = 0x41c6ce57 ^ seed;
  for (let i = 0, ch; i < str.length; i++) {
    ch = str.charCodeAt(i);
    h1 = Math.imul(h1 ^ ch, 2654435761);
    h2 = Math.imul(h2 ^ ch, 1597334677);
  }
  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
};

const getHueFromText = (text: string): string => `hue-rotate(${stringToNumber(text) % 360}deg)`;

const { project } = Astro.props;
---

<a href={`/projects/${project.id}/`}>
  <article>
    <div>
      <Image
        class="thumbnail"
        transition:name={`project-img-${project.id}`}
        src={project.data.image}
        densities={[1, 1.5, 2]}
        width="400"
        alt=""
      />
      <Image
        style={{ filter: getHueFromText(project.id) }}
        class="backdrop"
        src={backdrop}
        alt="Backdrop"
      />
    </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(var(--1) * -1));
  }

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

  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;
  }

  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);
  }

  img.thumbnail {
    z-index: 2;
  }

  img.backdrop {
    position: absolute;
    transform: scale(1.1);
    inset: 0;
    object-fit: cover;
    filter: blur(6px);
  }
</style>