"use client";

import Script from "next/script";

interface FacebookPixelsProps {
  pixels?: string[];
}

/**
 * Facebook Pixel Integration Component
 * 
 * Loads Facebook pixel tracking scripts dynamically based on pixel IDs
 * received from the backend. Each pixel is initialized with PageView tracking.
 * 
 * @param pixels - Array of Facebook pixel IDs to load
 */
export function FacebookPixels({ pixels }: FacebookPixelsProps) {
  if (!pixels || pixels.length === 0) {
    return null;
  }

  return (
    <>
      {pixels.map((pixelId) => (
        <Script
          key={pixelId}
          id={`fb-pixel-${pixelId}`}
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '${pixelId}');
fbq('track', 'PageView');
            `,
          }}
        />
      ))}
    </>
  );
}
