---
export interface Props {
  imageData: ImageData,
  optimize?: boolean
}

import { Picture } from 'astro:assets'
import type { ImageData } from './types';
import { importImage } from './images';

const { imageData } = Astro.props;

const image = importImage(imageData);
---

<div class="col">
  <div class="card">
    <div class="card-body">
      <b class="card-title">{imageData.title}</b>
    </div>
    {typeof image === 'string' && <img src={image} alt={imageData.title} class="pic"/>}
    {typeof image !== 'string' && 
    <Picture 
      src={image} 
      alt={imageData.title}
      class:list={'pic'} />
    
    }
  </div>
</div>

<style lang="scss">
  .card {
    margin-bottom: 20px;
  }
  .pic {
      height: 100%;
      width: 100%;
    }
</style>