---
import Date from "./Date.astro";
import Icon from "./Icon.astro";

interface Props {
  title: string;
  pubDate?: Date;
  modDate?: Date;
  slug?: string;
}

const { title, pubDate, modDate, slug } = Astro.props;
---

<header class="bg-white dark:bg-neutral-800">
  <div
    class="prose prose-neutral prose-a:font-normal dark:prose-invert prose-h1:font-bold relative mx-auto px-4 py-8 before:absolute before:start-4 before:end-4 before:bottom-0 before:border-b before:border-neutral-300 before:content-[''] dark:before:border-neutral-600"
  >
    {
      pubDate ? (
        <hgroup>
          <h1 class="mb-2">{title}</h1>
          <p>
            Published: <Date date={pubDate} />
            <br />
            Last modified:{" "}
            {modDate ? <Date date={modDate} /> : <span>No modifications</span>}
          </p>
          <a
            href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`}
            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline active:bg-neutral-200 dark:text-blue-300 active:dark:bg-neutral-700"
          >
            <Icon name="edit" />
            Edit this page
          </a>
        </hgroup>
      ) : (
        <h1>{title}</h1>
      )
    }
  </div>
</header>
