<script lang="ts">
  import {t} from "$lib/translations";
  import type {TProject} from "./projects";

  export let project: TProject;

  const visifyImage = (event: MouseEvent) => {
    (event.target as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
  }
</script>

<div class="relative rounded-2xl py-4 flex flex-col">
  <div class="flex items-center gap-2 mb-2">
    <h3 class="text-xl">
      {$t(project.nameSlug)}
    </h3>
    <hr class="grow border-slate-800">
  </div>

  <p class="text-slate-400 mb-4 text-sm">
    {@html $t(project.descriptionSlug)}
  </p>

  <div
    class="project__gallery grid gap-1 grid-flow-col mb-4 mt-auto md:rounded"
  >
    {#each project.images as image}
      <!-- svelte-ignore a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->
      <img
        class="rounded"
        alt={`${$t(project.nameSlug)} screenshot`}
        src={image}
        on:click={visifyImage}
      >
    {/each}
  </div>

  <div class="flex gap-2">
    {#each project.links as link}
      <a
        target="_blank"
        href={link.href}
        class="flex gap-1 items-center py-1 text-sm"
      >
        {#if link.icon}
          <svelte:component this={link.icon} />
        {/if}
        {$t(link.textSlug)}
      </a>
    {/each}
  </div>
</div>

<style lang="postcss">
  .project__gallery {
    overflow: auto;
    grid-auto-columns: calc(50% - 16px);
    margin-inline: -8px;
    padding-inline: 8px;

    @media screen(md) {
      margin-inline: 0;
      padding-inline: 0;
    }
  }
</style>
