---
import { Layout } from "virtual:astro-hashnode/components";
import { getPost } from '../../hn-gql';
import Tag from '../../components/Tag.astro';
import Author from '../../components/Author.astro';
import { Markup } from 'astro-remote';
import { Image } from 'astro:assets';
import RemoteImage from '../../components/astro-remote/RemoteImage.astro';

const { slug } = Astro.params;

const checkSlug = (slug:string|undefined) => {
  if (slug !== undefined) {
    return slug as string;
  }
  return " " as string;
}

const post = await getPost(checkSlug(slug));
---
{post ? (
<Layout pageTitle={post.title} ogImage={post.coverImage.url}>
  <article class="bg-white p-3 mt-3 flex flex-col">
    <Image 
      class="rounded-lg" 
      src={post.coverImage.url} 
      alt={post.title} 
      inferSize={true} 
      loading="eager"
    />
    <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
    <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>

    <Author post={post} />
    
    <div class="flex flex-wrap justify-center items-center mt-5 mb-5">
      {post.tags && post.tags.map((tag) => <Tag tag={tag} />)}
    </div>
    
    <div class="post-details">
      <Markup 
        content={post.content.html} 
        components={{
          img: RemoteImage
        }}
      />

    </div>
  </article>
</Layout>) : (
  <Layout pageTitle="404">
    <div class="text-center my-20">
      <h1 class="text-4xl font-bold">404</h1>
      <p>Post not found</p>
    </div>
  </Layout>
)}