---
import SolidComments from "../components/PostComments";
import BaseLayout from "./BaseLayout.astro";

interface Props {
  frontmatter: {
    title: string;
    pubDate: Date;
    tags: string[];
    bskyPostId?: string;
    ogImage?: string;
  };
}
const { frontmatter } = Astro.props;
---

<style>
  a {
    color: rgba(0, 0, 0, 0.8);
    padding: 6px 4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    transition: background-color 0.2s cubic-bezier(0.6, 0.6, 0, 1);
    text-decoration: none;
    font-size: 1.15em;

    &:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 4px;
  }
</style>

<!-- In order to affect the slot, we unfortunately need to make the style global -->
<!-- Should be changed to a locally scoped style in the future if possible -->
<style is:global>
  pre {
    padding: 1rem 1.5rem;
    border-radius: 4px;
  }

  html {
    scroll-behavior: smooth;
  }

  h2 {
    position: relative;

    &:hover {
      a {
        opacity: 1;
      }
    }

    a {
      position: absolute;
      left: -24px;
      top: 2px;
      opacity: 0;
      width: 24px;
      transition: opacity 0.4s cubic-bezier(0.12, 0.8, 0.42, 1.03);
    }
  }

  .publish-date {
    color: var(--text-secondary);
    font-size: 14px;
  }

  blockquote {
    font-style: italic;
    border-left: 3px solid var(--mark-color);
    padding-left: 1rem;
  }
</style>

<script>
  const linkSvg = `<svg 
      xmlns="http://www.w3.org/2000/svg" 
      focusable="false" 
      width="16"
      height="16"
      viewBox="0 0 16 16" 
      stroke-width="1" 
      style="stroke: var(--text-primary);"
      stroke-linecap="round" 
      stroke-linejoin="round">
      <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
  </svg>
  `;

  const applyAnchorHeadings = () => {
    const anchorHeadings = document.querySelectorAll("h2, h3, h4, h5, h6");

    [...anchorHeadings].forEach((heading) => {
      const anchor = document.createElement("a");
      anchor.href = `#${heading.id}`;
      anchor.setAttribute("data-testid", `anchor-heading-${heading.id}`);
      anchor.innerHTML = linkSvg;
      heading.appendChild(anchor);
    });
  };

  if (window.location.pathname.startsWith("/writing")) {
    applyAnchorHeadings();
  }

  document.addEventListener("astro:after-swap", () => {
    if (window.location.pathname.startsWith("/writing")) {
      applyAnchorHeadings();
    }
  });
</script>

<BaseLayout pageTitle={frontmatter.title} ogImage={frontmatter.ogImage}>
  <h1>{frontmatter.title}</h1>
  <p class="publish-date">
    Published on: {frontmatter.pubDate.toString().slice(0, 15)}
  </p>
  <slot />
  {
    frontmatter.bskyPostId ? (
      <SolidComments postId={frontmatter.bskyPostId} client:only="solid-js" />
    ) : null
  }
</BaseLayout>