---
import Base from "./Base.astro";

import Box4x3Mask from "/assets/box-4x3-mask.png";
import Hr from "/assets/hr.png";

import "/components/markdown.css";

interface Props {
  frontmatter: {
    title: string;
    graph?: {
      description: string;
      type?: "website" | "article" | `${"music" | "video"}.${string}`;
      image?: string;
    };
  };
}

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

<Base
  title={frontmatter.title}
  graph={{
    description: "",
    ...frontmatter.graph,
    url: Astro.url.toString(),
  }}
>
  <header style={`--box-4x3-mask-png: url(${Box4x3Mask.src});`}>
    {frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
    <h1>{frontmatter.title}</h1>
  </header>

  <hr style={`--hr-png: url(${Hr.src});`} />

  <article class="markdown-style">
    <slot />
  </article>
</Base>

<style>
  header {
    max-width: 60ch;
    padding: 10px;
    margin: auto;
  }

  img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    mask-image: var(--box-4x3-mask-png);
    mask-size: 100%;
  }

  hr {
    margin-block: 5px;
    height: 5px;
    border: none;
    border-image: var(--hr-png) 0 5 fill / 0 5px round;
    width: clamp(60ch, 80vw, 80ch);
    margin-inline: auto;

    @media (max-width: 60ch) {
      width: calc(100% - 20px);
      margin-inline: 10px;
    }
  }
</style>