import { LuArrowRight, LuClock } from "@preact-icons/lu";
import { Post } from "../lib/posts.ts";

export default function PostCard(props: { post: Post }) {
  const { post } = props;
  return (
    <div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
      <div class="card-body p-4 sm:p-6">
        <h2 class="card-title text-base-100 justify-center text-center break-words">
          {post.title}
        </h2>

        <p class="text-center text-base-100 break-words">{post.blurb}</p>

        <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
          <LuClock class="flex-shrink-0" />
          <span>
            {post.publishedAt!.toLocaleDateString("en-us", {
              month: "long",
              day: "numeric",
              year: "numeric",
            })}
          </span>
        </div>

        <div class="card-actions justify-end mt-4">
          <a
            href={`/post/${post.slug}`}
            class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
          >
            <LuArrowRight class="text-lg" />
          </a>
        </div>
      </div>
    </div>
  );
}