---
import ImageMod from "./ImageMod.astro";

const { darkImage, lightImage } = Astro.props;
---

<div class="relative mt-42">
  <!--Switch easily from dark/light mode -->
  <div class="theme-switch-container">
    <div class="theme-switch" id="theme-toggle">
      <div class="theme-switch-button" id="theme-button"></div>
    </div>
  </div>
  <div class="grid grid-cols-1 lg:grid-cols-2" id="image-container">
    <ImageMod
      src={darkImage}
      alt="Dark Mode Demo"
      width={800}
      height={400}
      class="h-[300px] sm:h-[500px] mt-0! object-cover dark-image"
    />

    <ImageMod
      src={lightImage}
      alt="Light Mode Demo"
      width={800}
      height={400}
      class="h-[300px] sm:h-[500px] mt-0! object-cover light-image theme-switched"
    />
  </div>
</div>

<style>
  @layer starlight.components {
    .theme-switch-container {
      /* Toggle */
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      width: 290px;
      height: 200px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.07);
      box-shadow: 0px 48px 56px rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(16px);
      border-radius: 600px;
    }
    .theme-switch {
      width: 204px;
      height: 120px;
      background:  color-mix(in oklab, var(--sl-color-white) 20%, transparent);;
      border-radius: 200px;
      padding: 12px;
      cursor: pointer;
      position: relative;
    }
    .theme-switch-button {
      width: 96px;
      height: 96px;
      background: var(--sl-color-white);
      border-radius: 48px;
      transition: transform 0.3s ease;
      position: absolute;
      top: 12px;
      left: 12px;
    }
    .theme-switch.active .theme-switch-button {
      transform: translateX(84px);
    }
    .dark-image,
    .light-image {
      transition: opacity 0.3s ease;
    }
    .theme-switched {
      opacity: 0.2;
    }

    @media (max-width: 740px) {
      .theme-switch-container {
        width: 190px;
        height: 120px;
        
      }
      .theme-switch {
        width: 140px;
        height: 80px;
        padding: 10px;
      }
      .theme-switch-button {
        width: 60px;
        height: 60px;
        border-radius: 40px;
        top: 10px;
        left: 10px;
      }
      .theme-switch.active .theme-switch-button {
        transform: translateX(60px);
      }
      
    }
  }
</style>

<script>
  const themeToggle = document.getElementById("theme-toggle");
  const imageContainer = document.getElementById("image-container");

  if (themeToggle && imageContainer) {
    themeToggle.addEventListener("click", function () {
      // Toggle the switch button position
      themeToggle.classList.toggle("active");

      // Toggle the image opacity
      if (imageContainer) {
        const darkImage = imageContainer.querySelector(".dark-image");
        const lightImage = imageContainer.querySelector(".light-image");

        if (darkImage) {
          darkImage.classList.toggle("theme-switched");
        }
        if (lightImage) {
          lightImage.classList.toggle("theme-switched");
        }
      }
    });
  }
</script>
