---
export interface Props {
  url: string
  description: string,
  name: string
}

const { url, description, name } = Astro.props
const target = url.startsWith("/") ? "" : "_blank" 
---

<a href={url} rel="noopener noreferrer" target={target}>
  <h2>{name}</h2>
  <p>{description}</p>
</a>

<style>
  * {
    transition: all var(--a-time-default) var(--a-animation-1);
  }

  a {
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: column;
    
    height: fit-content;
    min-height: 100%;
    width: 100%;
    min-width: 12em;

    text-align: center;
    text-decoration: none;
    align-content: center;

    padding: 10px;
    margin: 0px 0.5rem;

    background-color: var(--c-primary-background);
    border: 2px solid var(--c-primary-background);
    border-radius: 1.25rem;
  }
  p {
    color: var(--c-primary-text);
    text-align: justify;
    font-size: 1.1em;
    margin: 0.5em;
  }
  a > h2 {
    margin: 0.3rem 0.5rem;
    color: var(--c-accent-1);
    font-size: 1.5rem;
    line-height: normal;
    text-decoration: none;
  }
  a > h3 {
    margin: 0.2em 0.5rem;
    color: var(--c-primary-text);
    font-size: 1rem;
    line-height: normal;
    text-decoration: none;
  }

  a:hover {
    border-color: var(--c-accent-1);
  }

  @media (min-width: 420px) {
    a {
      min-width: 24em;
      max-width: 24em;
    }
  }

</style>