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

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

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

<style lang="scss">
  @import "../styles/_var.scss";
  a {
    color: white;
    padding: 20px;
    &.project-external {
      text-decoration: none;
      &::after {
        background-color: white;
        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: -25px;
      img {
        max-height: 250px;
        margin: 20px 10px;
        border-radius: 10px;
      }
    }
    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: -3px;
      text-align: center;
      * {
        margin: 2px !important;
      }
    }
  }
</style>

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