---
import foscLogo from "../assets/img/fosc-logo-old.png";
import { Image } from "astro:assets";
---

<div id="container" class="h-[30vh]">
  <Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div>

<style>
  #logo {
    /* Add border styles to create thickness */
    border: -2px solid #ccc; /* Adjust border width for thickness */
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
  }

  #container {
    perspective: 400px; /* Add perspective to the container for 3D effect */
  }
</style>

<script>
  // script.ts
  interface LogoElement extends HTMLElement {
    rotationX: number;
    rotationY: number;
  }

  const logo = document.querySelector("#logo") as LogoElement;
  const logoContainer = document.querySelector("#container") as HTMLElement;

  let sensitivity = 100; // Adjust the sensitivity as needed
  let mouseX = 0;
  let mouseY = 0;
  let targetRotationX = 0;
  let targetRotationY = 0;

  function updateLogoRotation() {
    const { left, top, width, height } = logoContainer.getBoundingClientRect();
    const centerX = left + width / 2;
    const centerY = top + height / 2;

    const dx = (mouseX - centerX) / sensitivity;
    const dy = (mouseY - centerY) / sensitivity;

    targetRotationX = -dy;
    targetRotationY = dx;
  }

  function animateRotation() {
    const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions

    const dx = targetRotationX - logo.rotationX;
    const dy = targetRotationY - logo.rotationY;

    logo.rotationX += dx * smoothingFactor;
    logo.rotationY += dy * smoothingFactor;

    logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;

    requestAnimationFrame(animateRotation);
  }

  document.addEventListener("mousemove", (e: MouseEvent) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
    updateLogoRotation();
  });

  document.addEventListener("mouseleave", () => {
    mouseX = 0;
    mouseY = 0;
    targetRotationX = 0;
    targetRotationY = 0;
    updateLogoRotation();
  });

  // Initial rotation values
  logo.rotationX = 0;
  logo.rotationY = 0;

  animateRotation();
</script>
