---
import BackNav from "../components/BackNav.astro";
import { findImageByPath } from "../lib/findImage";
import type { Post } from "../types/global";
import Main from "./Main.astro";

interface Props {
  frontmatter: Post;
}

const { frontmatter } = Astro.props;

const titleImg = findImageByPath(frontmatter.image.path);
---

<Main>
  <article>
    <img
      id="titleImg"
      src={titleImg.src}
      alt={frontmatter.image.alt}
      class="rounded"
    />
    <h1 class="headline">{frontmatter.title}</h1>
    <span class="subtitle">{frontmatter.subtitle}</span>
    <hr />
    <div class="bottom-info">
      <span>Autor: {frontmatter.author}</span>
      <span>{frontmatter.date}</span>
    </div>
    <hr />
    <slot />
  <BackNav />
  </article>
</Main>

<style>
  article {
    margin: 32px auto;
    max-width: 900px;
    padding: 0 clamp(8px, 32px, 64px);
  }

  #titleImg {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
  }

  .bottom-info {
    display: flex;
    justify-content: space-between;
  }

</style>