---
import Date from "./Date.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 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 dark:text-blue-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              class="size-5"
            >
              <path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z" />
              <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z" />
            </svg>
            Edit this page
          </a>
        </hgroup>
      ) : (
        <h1>{title}</h1>
      )
    }
  </div>
</header>
