/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from "@front10/base-elements";
import * as React from "react";
import { CardData, SingleCardProps } from "../CardProps";

function ScriptTag({ src }: { src: string }) {
  React.useEffect(() => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.type = "text/javascript";

    document.body.appendChild(script);
  }, [src]);
  return null;
}

type TiktokEmbedData = CardData & {
  html?: string;
};

function TiktokEmbed(
  { data: { html } = {} }: SingleCardProps<TiktokEmbedData>,
  ref: React.Ref<HTMLDivElement>
) {
  return html ? (
    <React.Fragment>
      <div ref={ref} dangerouslySetInnerHTML={{ __html: html }} />
      <ScriptTag src="https://www.tiktok.com/embed.js" />
    </React.Fragment>
  ) : null;
}

const TiktokEmbedWithRef = React.forwardRef(TiktokEmbed);

export { TiktokEmbedWithRef as TiktokEmbed };