---
export interface Props {
  date?: Date;
  imageData: ImageData;
  bold?: boolean;
}

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

const { date, imageData, bold = false } = Astro.props;

const optImage = importImage(imageData);

const actualDate = date ? new Date(date) : undefined;
const dateString = actualDate?.toISOString()?.slice(0, 10);
---

<div class:list={[{ "page-hero": !bold, "index-hero": bold }]}>
  <div class="title-text text-center">
    <h1 class:list={[{ "fw-bold": bold, "display-5": bold }]}>{imageData.title}</h1>
    {date && <div class="col-auto date align-self-end">{dateString}</div>}
  </div>
  <Picture src={optImage} alt={imageData.title} />
</div>

<style lang="scss">
  @media (min-width: 600px) {
    .index-hero img {
      aspect-ratio: 3 / 1;
    }
    .page-hero img {
      aspect-ratio: 4 / 1;
    }
  }
  @media (max-width: 600px) {
    .index-hero img {
      aspect-ratio: 1 / 2;
    }
    .page-hero img {
      aspect-ratio: 1 / 1;
    }
  }

  .index-hero,
  .page-hero {
    margin-bottom: 50px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title-text {
      color: white;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);

      h1 {
        border: 0;
      }
    }
  }
</style>