---
import Link from "./Link.astro";

const { title, href } = Astro.props;

interface Props {
  title: string;
  href?: string;
}

const ID = title.toLowerCase().replaceAll(" ", "-");
---

{
  href ? (
    <Link href={href} newTab>
      <div class="card card-link" id={"card-" + ID}>
        <h2 class="card-title">{title}</h2>
        <slot />
      </div>
    </Link>
  ) : (
    <div class="card" id={"card-" + ID}>
      <h2 class="card-title">{title}</h2>
      <slot />
    </div>
  )
}

<style>
  .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background-color: var(--background-highlight);
    border-radius: 10px;
    padding-bottom: 1rem;
    min-height: 140px;
  }
  .card-link {
    cursor: pointer;
    transition: 250ms ease-in-out;
  }
  .card-link:hover {
    filter: brightness(0.9);
  }
  .card-title {
    margin: 1rem;
    text-align: center;
  }
</style>
