---
import { Picture as AstroPic } from "astro:assets";
const { src, alt, nsfw } = Astro.props;
---

<div class="overflow-hidden rounded" data-nsfw={`${nsfw}`}>
  <div
    data-lightbox="true"
    id="parent"
    class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
  >
    <img src={src} alt={alt} loading="lazy" />
    {
      alt && (
        <div
          id="info"
          class="z-[2] absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
        >
          {alt}
        </div>
      )
    }
  </div>
</div>

<script>
  import { nsfw } from "../lib/stores/nsfw";

  const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
  nsfw.subscribe((nsfw) => {
    if (nsfw) {
      // @ts-ignore
      nsfwImages.forEach((image) => (image.style.display = "inherit"));
    } else {
      // @ts-ignore
      nsfwImages.forEach((image) => (image.style.display = "none"));
    }
  });
</script>

<style>
  #parent:hover > #info {
    opacity: 70;
  }

  #info {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
  }
</style>
