---
import LocalFileLink from "./LocalFileLink.astro";
import Translated from "./Translated.astro";
import WIPIndicator from "./WIPIndicator.astro";

type Props = {
  back?: string;
  editButton?: string;
  editFolderButton?: string;
} & (
  | { title: string; wip?: undefined }
  | { title: { fr: string; en: string }; wip?: boolean }
  | {
      title: {
        img: {
          src: string;
          alt: string;
          srcset: string;
          height: string;
          width: string;
        };
      };
      wip?: boolean;
    }
);

const { title, wip, back, editButton, editFolderButton } = Astro.props;
---

<script></script>

<header>
  {
    (editButton || back) && (
      <section class="links">
        {back && (
          <a
            class="back"
            href={back}
            onclick="if (history.length > 1) { event.preventDefault(); history.back(); }"
          >
            &lt;- <i18n>back</i18n>
          </a>
        )}
        {editButton && (
          <LocalFileLink
            keybind="e"
            href={editButton}
            openWith="vscode"
            title="edit (if you're me only :3)"
            text="/ed"
          />
        )}
        {editFolderButton && (
          <LocalFileLink
            keybind="o"
            href={editFolderButton}
            openWith="vnd.gwennlbh.explorer"
            title="open folder (if you're me only :3)"
            text="/o"
          />
        )}
      </section>
    )
  }

  {
    typeof title === "string" ? (
      <h1 i18n>{title}</h1>
    ) : "img" in title ? (
      <h1 class="image">
        <img {...title.img} />
      </h1>
    ) : (
      <h1>
        <Translated {...title} />
        {wip && <WIPIndicator />}
      </h1>
    )
  }

  <slot />
</header>

<style>
  header {
    display: flex;
    flex-direction: column;
    font-size: 1.7rem;
    max-width: 60rem;
  }

  .links {
    /* Prevents h1 from encroaching on the links' click area */
    z-index: 10;
  }

  h1 {
    font-size: 2.8em;
    text-wrap: balance;
    line-height: 0.8;
    margin-bottom: 0.25lh;
  }

  img {
    max-width: 100%;
    max-height: 10rem;
    object-fit: contain;
    object-position: 0 0;
  }

  a.back {
    text-decoration: none;
  }

  section.links a:not(:last-child)::before {
    margin-left: 0.5em;
  }
</style>