import moment from "moment";
import Image from "next/image";
import Link from "next/link";
import { MessageSquare, Star } from "lucide-react";

import { IBlogPost } from "@/api/types/blog";
import { decodeHtml } from "../common/constant";

interface BlogCardProps {
  post: IBlogPost;
}

export default function BlogCard({ post }: BlogCardProps) {
  const categoryLabel =
    post?.postCategories?.map((c) => decodeHtml(c.name)).join(", ") ||
    "Uncategorized";
  const imageUrl = post.featuredImage?.filePath ?? null;

  return (
    <Link
      href={`/blog/detail/${post.code}`}
      className="no-underline w-full sm:w-97.5 bg-white rounded-xl border border-[#E2E2E2] hover:shadow-md transition-all flex flex-col cursor-pointer group"
      style={{ minHeight: 420, padding: "9px 9px 19px 9px" }}
    >
      {/* Image */}
      <div
        className="w-full overflow-hidden shrink-0 bg-[#e5e7eb]"
        style={{ height: 185, borderRadius: 5 }}
      >
        {imageUrl ? (
          <Image
            src={imageUrl}
            alt={post.title}
            width={390}
            height={185}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
        ) : (
          <div className="w-full h-full bg-[#e5e7eb]" />
        )}
      </div>

      {/* Content */}
      <div className="flex flex-col flex-1 px-3.5 pt-4 min-h-0">
        {/* Category */}
        <p className="text-xs text-[#6b7280] mb-1.5 truncate">
          In{" "}
          <span className="text-[#374151] font-medium">{categoryLabel}</span>
        </p>

        {/* Title */}
        <h2 className="text-[22px] font-bold text-[#111827] leading-snug group-hover:text-[#2563eb] transition-colors mb-2 line-clamp-3">
          {post.title}
        </h2>

        {/* Excerpt */}
        {post.exerpt && (
          <p className="text-sm text-[#6b7280] leading-relaxed line-clamp-2 overflow-hidden">
            {post.exerpt}
          </p>
        )}

        {/* Footer */}
        <div className="flex items-center justify-between pt-2 mt-auto">
          <div className="flex items-center gap-2">
            {post.isExclusive && (
              <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-amber-600">
                <Star className="h-3 w-3 fill-amber-400 text-amber-400" />
                Premium
              </span>
            )}
            <span className="text-xs text-[#9ca3af]">
              {post.publishedAt
                ? moment(post.publishedAt).format("MMMM D, YYYY")
                : "—"}
            </span>
          </div>
          <span className="flex items-center gap-1 text-xs text-[#9ca3af]">
            <MessageSquare className="h-3.5 w-3.5" />
            {post.commentsCount}
          </span>
        </div>
      </div>
    </Link>
  );
}