<script lang="ts">
  import { gallery } from '$lib/state.svelte';
  let {src, title, href=false} = $props()
  let hover = $state(false)
</script>

<style>
  .custom-spacing {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
  }
</style>

<article class="transparent round"
  onmouseenter={()=>hover=true}
  onmouseleave={()=>hover=false}>
  <img {src} class="responsive small-elevate">
  <div class="page" class:active={hover}>
    <button class="absolute bottom right circle transparent border no-margin" onclick={()=>{gallery.src=src; gallery.active=true}}>
      <i class="primary-text">search</i>
    </button>
  </div>
  <article class="absolute bottom left background tiny-margin custom-spacing medium-elevate">
    {#if href}
      <a class="link underline" href={href} target="_blank" rel="noopener noreferrer">
        {title}
      </a>
    {:else}
      <span>{title}</span>
    {/if}
  </article>
</article>