import React from 'react';
import { Twitter } from './components/TwitterComponent';
import { Youtube } from './components/YoutubeComponent';
import { TikTok } from './components/TiktokComponent';
import { Instagram } from './components/InstagramComponent';
import { Facebook } from './components/FacebookComponent';
import { useSocialEmbedsContext } from '../../contexts/SocialEmbedsProvider';
import { BlockedEmbedMessage } from './BlockedEmbedMessage';
import { VendorName } from './types';

const vendors = {
  twitter: Twitter,
  youtube: Youtube,
  tiktok: TikTok,
  instagram: Instagram,
  facebook: Facebook
};

export const Vendor = ({
  vendorName,
  url
}: {
  vendorName: VendorName;
  url: string;
}) => {
  const { isSocialEmbedAllowed, isAllowedOnce } = useSocialEmbedsContext();

  // Step 2: Only mount the actual social vendor component after consent
  const allowed =
    isSocialEmbedAllowed[vendorName] === true ||
    isAllowedOnce[vendorName] === true;

  if (
    !allowed &&
    ['instagram', 'twitter', 'facebook', 'youtube', 'tiktok'].includes(
      vendorName
    )
  ) {
    return <BlockedEmbedMessage vendorName={vendorName as VendorName} />;
  }

  const Component = vendors[vendorName];
  return <Component url={url} />;
};