---
export interface Props {
  description: string;
  imageData: ImageData;
  href: string;
}
import { Picture } from "astro:assets";
import type { ImageData } from './types';
import { importImage } from "./images";
const { href, imageData, description } = Astro.props;

const optImage = importImage(imageData);
---

<div class="col">
  <a href={href} class="fp-link">
    <div class="card">
      <Picture 
        src={optImage} 
        alt={`in which ${description}`} 
        class:list={['card-img-top', 'pic']}/>
      <div class="card-body">
        <h5 class="card-title">{imageData.title}</h5>
        <p class="card-text">in which {description}</p>
      </div>
    </div>
  </a>
</div>

<style lang="scss">
  .card {
    margin-bottom: 20px;
  }

  .fp-link {
    display: inline-flex;
    text-decoration: none;
    margin: 5px;
  }

  .fp-link .card {
    //background-color: rgb(142, 181, 222);
    color: #555;
    border-radius: 0;
    border: 0;

    img {
      border-radius: 5px;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    .card-body {
      color: white;
      position: absolute;
      bottom: 5px;
      left: 12px;
    }

    .card-title {
      font-size: large;
    }

    .card-text {
      font-size: medium;
    }

    .pic {
      height: 100%;
      width: 100%;
    }
  }
</style>