/**
 * ExtensionSlot — renders registered Pro extension components for a given slot.
 */

import { useSyncExternalStore } from "react";

import { getExtensions, getExtensionsSnapshotVersion, subscribeExtensions, type ExtensionSlotName } from "@/extensions/registry";

interface ExtensionSlotProps {
  name: ExtensionSlotName;
}

export function ExtensionSlot({ name }: ExtensionSlotProps) {
  useSyncExternalStore(
    subscribeExtensions,
    getExtensionsSnapshotVersion,
    () => 0,
  );

  const components = getExtensions(name);

  if (components.length === 0) {
    return null;
  }

  return (
    <>
      {components.map((Component, index) => (
        <Component key={`${name}-${index}`} />
      ))}
    </>
  );
}

export default ExtensionSlot;
