---
import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
import { formatDate } from "../../utils";
import FeatureImage from "./FeatureImage.astro";

export type Props = {
  post: Post;
  settings: Settings;
};

const { post, settings } = Astro.props as Props;
---
<header class="article-header gh-canvas">
    <div class="flex justify-between">
      <section class="flex flex-grow align-middle">
        <div class="text-ctp-overlay2">
          { post.primary_author  && (
            <h4 class="text-ctp-teal">Author: 
            <a href={`/author/${post.primary_author.slug}`}>{post.primary_author.name}</a>
          </h4>
          )}
          <div class="text-ctp-overlay2">
            <time class="text-ctp-sapphire" datetime={formatDate(post.created_at)}
              >{formatDate(post.created_at)}
            </time>
            <span class="text-ctp-peach"
              ><span class="text-ctp-overlay2">&bull;</span>
              {post.reading_time} min read
            </span>
          </div>
        </div>
      </section>
    </div>
    <center><h1 class="text-5xl righteous pb-5">{post.title}</h1></center>
    {post.feature_image && (
      <FeatureImage
        image={post.feature_image}
        alt={post.feature_image_alt ? post.feature_image_alt : post.title}
        caption={post.feature_image_caption || "" }
        settings={settings}
        transitionName={`img-${post.title}`}
      />
    )}
    </header>