---
import { getCollection } from "astro:content";

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

const posts = await getCollection("blog").then((x) =>
  x.sort(
    (a, b) =>
      // cast needed as you can subtract Date but ts doesnt like it
      (b.data.pub as unknown as number) - (a.data.pub as unknown as number),
  ),
);

interface Props {
  heading?: string;
}

const HeadingLevel = Astro.props.heading ?? "h2";
---

<section
  class="blog"
  style={`
    --box-tlbr-png: url(${BoxTlbr.src});
    --hr-png: url(${Hr.src});
    --box-4x3-mask-png: url(${Box4x3Mask.src})
`}
>
  <HeadingLevel>Blog Posts</HeadingLevel>
  {
    posts.map((post) => (
      <article class="post">
        <a href={`/blog/${post.id}`}>
          {import(
            `../../content/blog/assets/${post.data.banner.replace(".png", "")}.png`
          ).then(({ default: img }) => (
            <img src={img.src} alt="" />
          ))}
          <hr />
          <h3 class="title">{post.data.title}</h3>
          <div class="bio">{post.data.bio}</div>
          <time
            datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth()}-${post.data.pub.getDate()}`}
            class="pub"
          >
            {post.data.pub.getDate()}-{post.data.pub.getMonth()}-
            {post.data.pub.getFullYear()}
          </time>
        </a>
      </article>
    ))
  }
</section>

<style>
  .blog {
    contain: size;
    height: 100%;
    overflow-y: auto;
  }

  .post {
    border-image: var(--box-tlbr-png) 10 10 fill / 20px 20px round;
    padding: 30px;
  }

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

  a {
    color: black;
    text-decoration-line: none;

    &:hover,
    &:focus,
    &:active {
      text-decoration-line: underline;
    }

    &:active {
      text-decoration-style: dashed;
    }
  }

  hr {
    margin-block: 5px;
    height: 5px;
    border: none;
    border-image: var(--hr-png) 0 5 fill / 0 5px round;
  }
</style>