---
import { Image } from 'astro:assets'
import { plsLoadImage } from '../utils/tools'
import type { GlobImage } from '../types/generic'
export interface Props {
  title: string
  link: string
  date: Date
  servant: string
  turns: string
  runner: string
}

const { turns, runner, date, servant, link, title } = Astro.props

const options_date: Intl.DateTimeFormatOptions = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
}

const servantImagePath = `/src/assets/ta_servants/${servant}.png`
const servant_images = import.meta.glob<GlobImage>(
  '/src/assets/ta_servants/*.png'
)
const loaded_image = plsLoadImage(servant_images, servantImagePath)

const formatted_date = date.toLocaleDateString('de-DE', options_date)
const arialabel = `By ${runner} • ${formatted_date} ${turns}`
---

<a href={link} target="_blank" rel="noopener noreferrer" aria-label={arialabel}>
  <article>
    <Image src={loaded_image} alt="" class="icon" />
    <div class="title desktop">
      <h2>{title}</h2>
    </div>
    <p class="desktop">
      <span>
        By {runner}<br /> • <br />
        {formatted_date}
      </span>
    </p>
    <div class="mobile">
      <h2>{title}</h2>
      <span>
        •<br />By {runner}<br />{formatted_date}
      </span>
    </div>
    <div class="expand-on-hover">
      <h2>{turns}</h2>
    </div>
  </article>
</a>

<style>
  div {
    display: none;
  }

  span {
    display: flex;
  }

  a {
    text-decoration: none;
  }

  .mobile {
    width: 12rem;
    height: 8rem;
    padding: unset;
    margin: unset;
    display: flex;
    flex-flow: column;
    color: white;
    align-items: center;
    padding-left: 0.75rem;
    justify-content: center;
  }

  .mobile > h2 {
    margin: 0%;
    font-size: 1.25rem;
    text-align: center;
  }

  .mobile span {
    font-size: 1.05rem;
    font-weight: bold;
  }

  article {
    background-color: var(--c-darkergray);
    border-color: var(--c-darkgray);
    padding: 1rem 1.5rem;
    text-align: center;
    transition: transform var(--speed) var(--ease);
    height: auto;
    max-width: 100%;
    border-radius: 1.25rem;
    --size-value: 7rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  @media (max-width: 1139px) {
    .desktop {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
  }

  @media (min-width: 625px) {
    article {
      width: 15rem;
      justify-content: center;
      padding: 1rem;
    }

    a {
      width: unset;
    }

    .mobile > h2 {
      font-size: 1.05rem;
    }

    .mobile span {
      font-size: 0.9rem;
    }
  }

  @media (min-width: 1140px) {
    .mobile {
      display: none;
    }

    article {
      max-width: 8rem;
      flex-direction: column;
      padding-bottom: 1.5rem;
    }

    .expand-on-hover {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-evenly;
      background-color: var(--c-duskgray);
      z-index: 99;
      transform: scaleY(0);
      transform-origin: top;
      position: absolute;
      top: 90%;
      left: 0px;
      right: 0px;
      color: white;
      border-radius: 0px 0px 1.25rem 1.25rem;
    }

    article > .icon {
      margin: 0.5rem;
    }
  }

  .desktop span {
    align-items: center;
    height: 3.75rem;
  }
  article:hover {
    transform: scale(var(--hover-scale));
  }

  article > .icon {
    border-radius: 1.25rem;
    width: var(--size-value);
    height: var(--size-value);
  }

  article:hover .title {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--c-darkgray);
    height: calc(var(--size-value) + 0.1rem);
    width: calc(var(--size-value) + 0.1rem);
    opacity: 90%;
    border-radius: 1.25rem;
    top: 1.45em;
  }

  article:hover .title h2 {
    margin: 0;
    display: inline-flex;
    font-weight: bold;
    color: white;
    font-size: 18px;
    line-height: 150%;
    padding: 0.5rem;
  }

  article .title h2 {
    display: none;
  }

  article .title {
    display: none;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  p {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    padding-top: 0.5rem;
    margin: 0.5rem 0px;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .expand-on-hover img {
    width: 3rem;
    height: 3rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }

  .expand-on-hover h2 {
    margin: 0.5rem;
  }

  article:hover .expand-on-hover {
    transform: scaleY(1);
    transition: transform 200ms ease-in-out;
    background-color: var(--c-duskgray);
  }
</style>
