---
export interface Props {
  name: string
  origin: string
  image: string
  link: string
}

const { link, image, origin, name } = Astro.props

const img: string = `/assets/favourites/${image}.webp`
---

<a href={link} target="_blank" rel="noopener noreferrer">
  <div class="heading">{name}</div>
  <img src={img} alt={name} />
  <h2 class="subtext">
    {origin}
  </h2>
</a>

<style>
  .heading {
    display: flex;
    height: 4rem;
    font-size: 22px;
    color: white;
    max-width: 200px;
    padding-bottom: 0.3rem;
    font-weight: bold;
    margin: 0px;
    justify-content: center;
    align-items: center;
  }

  a:hover {
    transform: scale(var(--hover-scale));
  }

  a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--c-darkergray);
    border-color: var(--c-darkgray);
    padding: 0em 0.75em;
    width: 40%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform var(--speed) var(--ease);
    text-decoration: none;
  }

  a > img {
    padding: 0.25em;
    width: 90%;
    height: auto;
  }

  @media (min-width: 512px) {
    a {
      padding: 10px 10px;
      width: auto;
      height: auto;
    }

    a > img {
      padding: 1.5em;
      width: 200px;
      height: auto;
    }
  }

  .subtext {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 5;
    line-height: 20px;
  }
</style>