---
import { array } from "astro/zod";

interface Props {
  name: string;
  href?: string;
  gallery?: string | string[];
  center?: true;
}

const { name, href, gallery, center } = Astro.props;
---

<style lang="scss">
  @import "../styles/_var.scss";
  a {
    color: white;
    padding: 20px;
    &.project-external {
      text-decoration: none;
      &::after {
        width: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
      }
    }
  }
  .content {
    padding: 0;
    margin: 20px !important;
    max-width: 40vw;
    transition: border-color 0.3s;
    .gallery {
      margin-top: -30px;
      img {
        max-height: 250px;
        margin: 20px 10px;
        border-radius: 10px;
        transition: transform 0.3s;
        cursor: pointer;
        &:hover {
          transform: scale(1.1);
        }
      }
    }
    h2 {
      font-size: 20px;
    }
    &:hover {
      border-color: $link;
    }
  }
  .no-hover {
    &:hover {
      border: 1px solid lighten($highlight, 12%);
    }
  }
  @media (max-width: $responsive-width) {
    .gallery {
      margin-top: -4px;
      text-align: center;
      img {
        max-height: 15vh !important;
      }
      * {
        margin: 2px !important;
      }
    }
  }
</style>

<script lang="ts"></script>

<div id="galary-zoom"><img id="zoom-image" /></div>

<div class={href ? "content" : "content no-hover"}>
  <a class="project-external" target={href ? "_blank" : ""} href={href}>
    <h2>{name}</h2><slot />
    <a>
      <div
        style={center ? "text-align: center;" : ""}
        class={gallery ? "gallery" : ""}
      >
        {
          Array.isArray(gallery) ? (
            gallery.map((src) => (
              <img onclick="maximizeImage(this)" loading="lazy" src={src} />
            ))
          ) : (
            <img
              class="single"
              onclick="maximizeImage(this)"
              loading="lazy"
              src={gallery as string}
            />
          )
        }
      </div>
    </a>
  </a>
</div>