---
const { src, alt, nsfw, artist } = Astro.props;
const showNsfw = Astro.url.searchParams.has('nsfw') || false;
---

<div>
  { (nsfw && showNsfw) ? (
    <div class="overflow-hidden rounded-lg" 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 !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
        {
          alt && (
            <div
              id="info"
              class="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>
    ): null }
    
    { !nsfw ? (   
      <div class="overflow-hidden rounded-lg" 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 !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" /> 
          {
            alt && (
              <div
                id="info"
                class="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>
      ): null }
    
</div>

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

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