---
import { Image } from 'astro:assets';
import { getPost, type Post } from '../hn-gql';
import Author from './Author.astro';
import Tag from './Tag.astro';

type TagType = {
  name: string;
  slug: string;
};

interface Props {
  post: Post
}

const baseURL = import.meta.env.BASE_URL;
const { post } = Astro.props;
const p = await getPost(post.slug);
---
<a href={`${baseURL}blog/${post.slug}`} aria-label="Post">
  <div class="p-6 bg-white rounded shadow-sm my-4">
    <h2 class="text-4xl pb-5 font-semibold">{post.title}</h2>
    <div class="flex lg:flex-row md:flex-col max-sm:flex-col ">
      <Image 
        class="w-full rounded-lg shadow-xl" 
        src={p.coverImage.url} 
        alt={post.title} 
        inferSize={true} 
        transition:name={'hero:' + p.coverImage.url}
      />
      <div class="flex flex-col m-4">
        <p class="mb-2 text-lg">{post.brief}</p>
        <div class="mt-5 mb-5">
          <Author post={post} />
        </div>
        <div class="flex justify-center items-center">
            {post.tags.map((tag: TagType) => <Tag tag={tag} />)}
        </div>
      </div>
    </div>
  </div>
</a>