"use client";

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

export default function BlogCard({ blog }: any) {
  const publishedDate = blog.publishedAt
    ? new Date(blog.publishedAt)
    : new Date();

  const day = publishedDate
    .getDate()
    .toString()
    .padStart(2, "0");

  const month = publishedDate
    .toLocaleString("en-US", {
      month: "short",
    })
    .toUpperCase();

  return (
    <Link
      href={`/blogs/${blog.slug}`}
      title={blog.title}
      onClick={() => {
        try {
          sessionStorage.setItem(
            "tghr-pending-blog-view",
            blog.slug
          );
        } catch {
          // Ignore storage errors
        }
      }}
      className="
        group
        flex
        flex-col
        overflow-hidden
        rounded-xl
        border
        border-espresso/10
        bg-white
        transition-all
        duration-500
        hover:shadow-xl
      "
    >
      {/* Cover Image */}
      <div className="relative h-60 shrink-0 overflow-hidden">
        <Image
          src={blog.coverImage}
          alt={blog.title}
          title={blog.title}
          fill
          className="
            object-cover
            transition
            duration-700
            group-hover:scale-110
          "
        />

        {/* Date */}
        <div
          className="
            absolute
            left-4
            top-4
            rounded-md
            border
            border-gold
            bg-ivory
            px-4
            py-2
            text-center
            shadow
          "
        >
          <p className="font-serif text-xl text-espresso">
            {day}
          </p>

          <span className="text-xs tracking-widest text-gold-deep">
            {month}
          </span>
        </div>
      </div>

      {/* Content */}
      <div className="flex flex-col p-6">

        {/* Category */}
        <div
          className="
            mb-3
            flex
            items-center
            text-xs
            uppercase
            tracking-widest
            text-gold-deep
          "
        >
          <span>{blog.category}</span>
        </div>

        {/* Title */}
        <h3
          className="
            min-h-[4rem]
            font-serif
            text-2xl
            leading-tight
            text-espresso
            transition
            group-hover:text-gold-deep
            line-clamp-2
          "
        >
          {blog.title}
        </h3>

        {/* Excerpt */}
        <p
          className="
            mt-3
            min-h-[3.5rem]
            text-sm
            leading-7
            text-espresso/70
            line-clamp-2
          "
        >
          {blog.excerpt}
        </p>

        {/* Read More */}
        <div
          className="
            mt-4
            text-xs
            font-medium
            uppercase
            tracking-[0.25em]
            text-gold-deep
            transition-all
            duration-300
            group-hover:translate-x-2
          "
        >
          Read More →
        </div>

      </div>
    </Link>
  );
}