"use client";

import Link from "next/link";

export default function TrendingNow({ blogs }: any) {
  if (!blogs?.length) return null;

  const marqueeBlogs = [...blogs, ...blogs];

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

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

      <div className="overflow-hidden py-2">
        <div className="flex whitespace-nowrap animate-marquee">
          {marqueeBlogs.map((blog: any, index: number) => (
            <Link
              key={`${blog._id}-${index}`}
              href={`/blogs/${blog.slug}`}
              title={blog.title}
              onClick={() => {
                sessionStorage.setItem(
                  "tghr-pending-blog-view",
                  blog.slug
                );
              }}
              className="mx-6 text-sm text-espresso hover:text-gold-deep transition-colors"
            >
              ✦ {blog.title}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}