---
import WebExtensionStore from "../components/web-extension-store.astro";
import BaseLayout, {Props as BaseProps} from "./base.astro";

/** Props for the WebExtension layout. */
export interface Props {
  frontmatter: {
    /** A one-liner for a short description. */
    byline?: string;
    /** Data for the footer. */
    footer: {
      /** A link to the code's git repository. */
      link: string;
      /** The SPDX license identifier of the project. */
      license: string;
    };
    /** The name of the WebExtension to use in the header. */
    name: string;
    /** The path for the screenshot image. */
    screenshot: string;
    /** All the stores the WebExtension is available in. */
    stores: {
      /** The ID for the Chrome Web Store page. */
      chrome?: string;
      /** The ID for the Microsoft Edge Marketplace page. */
      edge?: string;
      /** The ID for the Mozilla Addons page. */
      firefox?: string;
    };
  } & BaseProps["frontmatter"];
}

const {frontmatter} = Astro.props;
---

<BaseLayout {...Astro.props}>
  <header class="page-header">
    <h1>
      <slot name="header-image" />
      {frontmatter.name}
    </h1>

    {
      frontmatter.byline ? (
        <p class="byline">{frontmatter.byline}</p>
      ) : undefined
    }
  </header>

  <main class="page-main">
    <slot name="main-content">
      <p class="store-links">
        {
          Object.entries(frontmatter.stores).map(([key, value]) => (
            <WebExtensionStore
              name={frontmatter.name}
              store={key}
              webExtensionId={value as string}
            />
          ))
        }
      </p>

      <img
        class="screenshot"
        alt=`${frontmatter.name} Screenshot`
        title=`${frontmatter.name} Screenshot`
        src={frontmatter.screenshot}
      />
    </slot>
  </main>

  <footer class="page-footer">
    &copy;
    <a href={frontmatter.footer.link}>{frontmatter.footer.license}</a>
    💖
    <a href="mailto:helllo@holllo.org">helllo@holllo.org</a>
    <slot name="extra-footer-content" />
  </footer>
</BaseLayout>