"use client";

import { useEffect, useRef } from "react";

declare global {
  interface Window {
    instgrm?: { Embeds: { process: () => void } };
  }
}

// Rendert die offiziellen Instagram-Einzelpost-Embeds (kein API-Zugang
// nötig, siehe models/InstagramPost.ts) — lädt Instagrams eigenes
// embed.js einmalig und lässt es die Blockquotes zu echten Einbettungen
// aufblasen. Bei Client-seitiger Navigation (z. B. Sprachwechsel) erneut
// aufrufen, falls das Skript schon vorher geladen wurde.
export function InstagramFeed({ urls }: { urls: string[] }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (window.instgrm) {
      window.instgrm.Embeds.process();
      return;
    }
    const script = document.createElement("script");
    script.src = "https://www.instagram.com/embed.js";
    script.async = true;
    document.body.appendChild(script);
  }, [urls]);

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

  return (
    <div ref={containerRef} className="flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory">
      {urls.map((url) => (
        <blockquote
          key={url}
          className="instagram-media shrink-0 snap-start"
          data-instgrm-permalink={url}
          data-instgrm-version="14"
          style={{ minWidth: "320px", margin: 0 }}
        />
      ))}
    </div>
  );
}