---
import markdownToText from "@helpers/markdownToText";
import { useTranslatedPath } from "@i18n/utils";
import type { InferEntrySchema } from "astro:content";

const tp = useTranslatedPath(Astro.url);

interface Props {
  post: {
    data: InferEntrySchema<"blog">;
    collection: string;
    body?: string;
    id: string;
  };
}

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

<div class="rounded-diag-md border border-neutral p-4 overflow-hidden">
  <a href={tp(`/${post.collection}/${post.id.split("/")[0]}`)}>
    <h2
      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden">
      {
        post.data.icon?.length > 3 ? (
          <img src={post.data.icon} class="h-6" />
        ) : post.data.icon?.length ? (
          <span>{post.data.icon}</span>
        ) : null
      }
      {post.data.title}
    </h2>
    <p class="text-ellipsis overflow-hidden line-clamp-2">
      {post.data.description || markdownToText(post?.body || "").slice(0, 200)}
    </p>
  </a>
  {
    post.data.tags && (
      <div class="flex gap-2 mt-2">
        {post.data.tags.map((tag) => (
          <a
            href={tp(`/tag/${tag}`)}
            class="text-xs border border-neutral p-2 rounded-md">
            {tag}
          </a>
        ))}
      </div>
    )
  }
</div>