"use client";
import Link from "next/link";
import { urlForImage } from "@/sanity/image";
import { formatDateUTC } from "@/lib/datetime";

type NewsWidgetItem = {
  _id: string;
  title: string;
  slug?: string;
  heroImage?: any;
  publishedAt?: string;
};


export default function WidgetNewsClient({ items }: { items: NewsWidgetItem[] }) {
  // Duplicate items 3x untuk membuat track [items, items, items]
  // Animasi akan menggeser -1/3 lebar track sehingga loop terlihat benar-benar seamless
  const loopItems = [...items, ...items, ...items];

  return (
    <>
      <style dangerouslySetInnerHTML={{
        __html: `
          @keyframes news-scroll {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(-33.333333%);
            }
          }
          .news-scroll-animate {
            animation: news-scroll 20s linear infinite;
            will-change: transform;
          }
          .news-scroll-animate:hover {
            animation-play-state: paused;
          }
        `
      }} />
      <section className="relative overflow-hidden ">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          {/* Header Section */}
          <div className=" text-center">
            <h2 className="mt-2 mb-4 text-lg text-gray-700 dark:text-gray-300 md:text-xl">
              Latest news and announcements for you
            </h2>
          </div>

          {/* Carousel Container */}
          <div className="relative overflow-hidden">
            {/* Gradient Fade Left */}
            <div className="absolute left-0 top-0 z-10 h-full w-24 bg-gradient-to-r from-background via-background/80 to-transparent pointer-events-none" />
            
            {/* Gradient Fade Right */}
            <div className="absolute right-0 top-0 z-10 h-full w-24 bg-gradient-to-l from-background via-background/80 to-transparent pointer-events-none" />
            
            <div className="inline-flex news-scroll-animate gap-4 md:gap-6">
              {/* Single track: [items, items] untuk infinite loop */}
              {loopItems.map((item, index) => {
                const builder = urlForImage(item.heroImage);
                const imageUrl = builder
                  ? builder.width(800).height(450).fit("crop").auto("format").url()
                  : undefined;
                const href = item.slug ? `/news/${item.slug}` : "/news";
                const formattedDate = item.publishedAt ? formatDateUTC(item.publishedAt, 'MMM DD, YYYY') : null;

                return (
                  <div
                    key={`${item._id}-${index}`}
                    className="flex-shrink-0 w-[280px] md:w-[320px]"
                  >
                    <Link href={href} className="group block">
                      {/* Card Minimalis */}
                      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-900">
                        {/* Preview Image */}
                        <div className="relative overflow-hidden">
                          {imageUrl ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img
                              src={imageUrl}
                              alt={item.title}
                              className="h-[140px] w-full object-cover transition-transform duration-300 group-hover:scale-105 md:h-[160px]"
                            />
                          ) : (
                            <div className="h-[140px] w-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 md:h-[160px]" />
                          )}
                        </div>

                        {/* Card Content */}
                        <div className="p-4">
                          <h3 className="line-clamp-2 text-sm font-semibold text-gray-900 transition-colors group-hover:text-brand-600 dark:text-gray-100 md:text-base">
                            {item.title}
                          </h3>
                          {formattedDate && (
                            <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                              {formattedDate}
                            </div>
                          )}
                        </div>
                      </div>
                    </Link>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}