BelgianBitcoinEmbassy/frontend/components/public/UpcomingEventsCarousel.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { api } from "@/lib/api";
import { getMeetupStartUtc } from "@/lib/meetupEventTime";
import { MeetupCard } from "@/components/public/MeetupCard";

export function UpcomingEventsCarousel({ excludeId }: { excludeId: string }) {
  const [items, setItems] = useState<any[]>([]);
  const scrollerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    api
      .getMeetups()
      .then((data: any) => {
        const list = Array.isArray(data) ? data : [];
        const now = new Date();
        const upcoming = list
          .filter((m: any) => {
            if (m.id === excludeId) return false;
            const start = getMeetupStartUtc(m.date, m.time || "00:00");
            if (Number.isNaN(start.getTime())) return false;
            return start >= now;
          })
          .sort(
            (a: any, b: any) =>
              getMeetupStartUtc(a.date, a.time || "00:00").getTime() -
              getMeetupStartUtc(b.date, b.time || "00:00").getTime()
          );
        setItems(upcoming);
      })
      .catch(() => setItems([]));
  }, [excludeId]);

  const scrollByDir = (dir: -1 | 1) => {
    const el = scrollerRef.current;
    if (!el) return;
    const delta = Math.min(el.clientWidth * 0.85, 360);
    el.scrollBy({ left: dir * delta, behavior: "smooth" });
  };

  if (items.length === 0) return null;

  return (
    <section className="mt-16 pt-12 border-t border-zinc-800/50">
      <div className="flex items-end justify-between gap-4 mb-6">
        <h2 className="text-lg font-black tracking-tight">More upcoming events</h2>
        <div className="flex gap-2 shrink-0">
          <button
            type="button"
            onClick={() => scrollByDir(-1)}
            className="p-2.5 rounded-xl border border-zinc-800 bg-zinc-900/80 text-on-surface-variant hover:text-primary hover:border-zinc-700 transition-colors"
            aria-label="Scroll left"
          >
            <ChevronLeft size={18} />
          </button>
          <button
            type="button"
            onClick={() => scrollByDir(1)}
            className="p-2.5 rounded-xl border border-zinc-800 bg-zinc-900/80 text-on-surface-variant hover:text-primary hover:border-zinc-700 transition-colors"
            aria-label="Scroll right"
          >
            <ChevronRight size={18} />
          </button>
        </div>
      </div>
      <div
        ref={scrollerRef}
        className="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-2 -mx-1 px-1 [scrollbar-width:thin]"
      >
        {items.map((m) => (
          <div key={m.id} className="snap-start shrink-0 w-[min(280px,calc(100vw-5rem))] sm:w-[280px]">
            <MeetupCard meetup={m} />
          </div>
        ))}
      </div>
    </section>
  );
}