---
import { Image } from "astro:assets";
import logo from "../img/scrumplex.svg";

const props = Astro.props;
---

<Image
  funky-logo
  src={logo}
  alt="Scrumplex Logo"
  title="Scrumplex"
  loading="eager"
  {...props}
/>

<script>
  document.addEventListener("astro:page-load", () => {
    const elems = document.querySelectorAll<HTMLImageElement>("[funky-logo]");
    elems.forEach((e) =>
      e.addEventListener("dblclick", () => {
        const randomRotation = Math.floor(Math.random() * 360);
        e.style.transform = `rotate(${randomRotation}deg)`;
      }),
    );
  });
</script>