---
import { type CollectionEntry } from 'astro:content';

export interface Props {
  cat: CollectionEntry<'cats'>;
}

const { cat } = Astro.props;
---

<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
  <div class="card is-center">
    <div class="img-wrapper">
      <img
        src={cat.data.image.src}
        alt={cat.data.image.alt}
        loading="lazy"
        decoding="async"
        width="350"
        height="250"
      />
    </div>
    <h3>{cat.data.name}</h3>
    <p>{cat.data.owner.name}</p>
  </div>
</a>

<style>
  .card-link-wrapper {
    color: var(--font-color);
  }

  .card-link-wrapper:hover {
    opacity: 1;
  }

  a:focus {
    outline-width: 5px;
  }

  .card {
    margin: 0.5rem 0;
    padding: 0;
    flex-direction: column;
    transition-duration: 300ms;
  }

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--color-grey);
  }

  .card h3 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .card p {
    margin-bottom: 1.25rem;
  }

  .img-wrapper {
    width: 100%;
    padding: 2rem;
    padding-bottom: 0.6rem;
  }

  .card img {
    display: block;
    width: 100%;
    object-fit: cover;
  }
</style>