import Image from "next/image";
import Link from "next/link";

export default function BlogCard({ post }: any) {
  const category =
    post.categories?.nodes?.[0]?.name || "Branding, Marketing";

  return (
    <Link
      href={`/blog/${post.slug}`}
      className="
        group bg-white rounded-lg overflow-hidden
        border border-[#202020]/15 transition
        flex flex-col
      "
    >
      {/* IMAGE */}
      {post.featuredImage?.node?.sourceUrl && (
      <div className="overflow-hidden">
        <Image
            src={post.featuredImage.node.sourceUrl}
            alt={post.title}
            unoptimized
            width={1200}
            height={675}
            className="w-full h-full"
        />
       </div>
       )}

      {/* CONTENT */}
      <div className="p-5 flex flex-col flex-1">
        {/* META */}
        <div className="text-sm text-[#202020]/70 flex items-center justify-between mb-2">
          <span>{category}</span>
          <span>
            {new Date(post.date).toLocaleDateString("en-US", {
              month: "short",
              day: "numeric",
              year: "numeric",
            })}
          </span>
        </div>

        {/* TITLE */}
        <h3 className="font-mono font-medium text-2xl mb-3 text-[#202020] line-clamp-3">
          {post.title}
        </h3>

        {/* EXCERPT */}
        <div
          className="text-[#202020]/70 text-[16px] line-clamp-4 mb-6"
          dangerouslySetInnerHTML={{ __html: post.excerpt }}
        />

        {/* FOOTER */}
        <div className="mt-auto flex items-center justify-between">
          <span className="text-[16px] font-medium text-[#202020]/70">
            {post.author?.node?.name || "TOGWE"}
          </span>

          <span
            className="
              w-[44px] h-[36px] rounded-md
              border border-[#202020]/50
              flex items-center justify-center
              text-[#202020]
              group-hover:bg-black group-hover:text-white
              transition
            "
            aria-hidden
          >
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M17.2999 8.73828L0.5 8.73828"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </span>
        </div>
      </div>
    </Link>
  );
}