---
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;
    max-width: 40vw;
    transition: border-color 0.3s;
    .gallery {
      img {
        margin-top: 20px;
        border-radius: 25px;
        max-width: 250px;
      }
    }
    h2 {
      font-size: 20px;
    }
    &:hover {
      border-color: $link;
    }
  }
  .no-hover {
    &:hover {
      border: 1px solid lighten($highlight, 12%);
    }
  }
</style>

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