---
import SkillBadge from "./SkillBadge.astro";
import type { SkillKey } from "../data/skills";
interface Props {
  name: string;
  skills: SkillKey[];
  href?: string;
  gallery?: string | string[];
  center?: true;
}
const { name, href, gallery, center, skills } = 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: 15px;
      display: flex;
      justify-content: space-between;
      img {
        max-height: 250px;
        max-width: 100%;
        border-radius: 10px;
        transition: transform 0.3s;
        cursor: pointer;

        &:hover {
          transform: scale(1.1);
        }

        @media (max-width: $responsive-width) {
          max-height: 12.5vh !important;
        }
      }
      @media (max-width: $responsive-width) {
        .single {
          max-height: 17vh !important;
        }
      }
    }
    h2 {
      font-size: 20px;
    }
    &:hover {
      border-color: $link;
    }
  }
  .no-hover {
    &:hover {
      border: 1px solid lighten($highlight, 12%);
    }
  }
</style>

<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 /><br />
  </a>
  <div style="margin-inline: 20px;">
    <b style="color: #fff;">Tools used:</b><br />
    {skills.map((skill: SkillKey) => <SkillBadge key={skill} />)}
  </div><br />
  <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>
</div>