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

export default function LatestPosts({ blogs }: any) {
  const latestPosts = blogs.slice(0, 4);

  return (
    <div>
      <h3 className="font-serif text-2xl text-espresso">
        Latest Posts
      </h3>

      <div className="h-0.5 w-full bg-gold/50" />

      <div className="mt-3 space-y-6">
        {latestPosts.map((blog: any) => {
          const publishedDate = new Date(blog.publishedAt);

          const date = publishedDate.toLocaleDateString("en-IN", {
            day: "2-digit",
            month: "short",
            year: "numeric",
          });

          return (
            <Link
              key={blog._id}
              href={`/blogs/${blog.slug}`}
              title={blog.title}
              onClick={() => {
                sessionStorage.setItem(
                  "tghr-pending-blog-view",
                  blog.slug
                );
              }}
              className="group flex gap-4"
            >
              <div className="relative h-20 w-24 shrink-0 overflow-hidden rounded-lg">
                <Image
                  src={blog.coverImage}
                  alt={blog.title}
                  title={blog.title}
                  fill
                  sizes="96px"
                  className="object-cover transition duration-500 group-hover:scale-110"
                />
              </div>

              <div className="flex-1">
                <h4 className="font-serif text-base text-black transition group-hover:text-gold-deep line-clamp-2">
                  {blog.title}
                </h4>

                <p className="text-xs text-gold-deep">
                  {date}
                </p>

                <p className="text-sm leading-6 text-espresso/90 line-clamp-2">
                  {blog.excerpt}
                </p>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}