<script lang="ts">
    import { page } from "$app/state";
    import type { PhotoPost } from "../../../../generated/prisma/client.js";

  interface Props { 
    photo: PhotoPost
  }

  const { photo }: Props = $props()

</script>

<li class="item">
  <a href={`/admin/photos/${photo.id}`} class="no-icon">
    <img width="250" src={`/image/${photo.fileName}`} alt={photo.title} />
  </a>

  <input type="text" name="id" value={`${page.url.protocol}//${page.url.host}/image/${photo.fileName}`} />

  <div class="text">
    <a href={`/admin/photos/${photo.id}`}>{photo.title}</a>
    {#if photo.description}
      <p>{photo.description}</p>
    {/if}
  </div>
</li>

<style>
  .item {
    --photo-width: 250px;

    display: flex;
    flex-direction: column;
    justify-content: center;

      img {
        width: var(--photo--width);
      }

      .text {
        width: var(--photo-width);
      }

  }

  .item img {
    width: 250px;
    height: auto;
    height: fit-content;
  }
</style>
