import { convertUtc } from "../lib/convertUtc.ts";
import { truncateString } from "../lib/truncate.ts";
import { Post } from "../types/index.ts";

export const PostCard = function PostCard({ post }: { post: Post }) {
  const handleCardClick = (e: MouseEvent) => {
    // Don't navigate if clicking on the author link
    if ((e.target as HTMLElement).closest("a")) {
      return;
    }
    window.location.href = `${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`;
  };

  return (
    <div
      class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105 cursor-pointer"
      onClick={handleCardClick}
    >
      <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
      <p class="text-white">
        Written by{" "}
        <a
          class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
          href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
        >
          {post.first_name} {post.last_name}
        </a>{" "}
        at {convertUtc(post.created_at)}
      </p>
      <p class="text-gray-400">{truncateString(post.body, 15)}</p>
    </div>
  );
};