---
// SPDX-FileCopyrightText: 2025 Norbert Melzer
// SPDX-FileContributor: Norbert Melzer
//
// SPDX-License-Identifier: MIT

import { getEntry, type CollectionEntry } from "astro:content";

import { postPath, authorPath } from "../scripts/paths";
import Date from "../components/Date.astro";

export interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;

const author = await getEntry(post.data.author);
---

<div class:list={["p-1", "min-h-[150px]", "min-h-[150px]"]}>
  <div class:list={["flex", "flex-col", "md:flex-row", "justify-between"]}>
    <h2
      class:list={[
        "flex",
        "text-3xl",
        "font-extrabold",
        "text-[--highlight-color]",
      ]}
    >
      <a class:list={["hover:underline"]} href={postPath(post)}
        >{post.data.title}</a
      >
    </h2>
    <div
      class:list={[
        "flex",
        "flex-col",
        "text-[color-mix(in_srgb,var(--highlight-color),var(--text-color)_50%)]",
      ]}
    >
      <span class:list={["md:text-right"]}>
        <Date datetime={post.data.date.toISOString()} />
      </span>
      <span class:list={["md:text-right", "text-nowrap"]}>
        <a href={authorPath(author)}>
          {author.data.first_name}
          {author.data.last_name}
        </a>
      </span>
    </div>
  </div>
  <div>
    {/* TODO: provide the hero image */}
    {post.data.description}
  </div>
</div>