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

export const PostCard = function PostCard({
  post,
  colorValue,
}: {
  post: Post;
  colorValue: string;
}) {
  return (
    <div
      class={`p-6 bg-[#484659] rounded-lg shadow-xl transition-all duration-300 ease-in-out border-b-4 hover:shadow-xl hover:scale-105`}
      style={{ borderBottomColor: colorValue }}
    >
      <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
        <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-[#cba6f7] 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.publish_date)}
        </p>
        <p class="text-gray-400">{truncateString(post.body, 45)}</p>
      </a>
    </div>
  );
};