import { useEffect } from 'react';
import { useSilkeIframeContext } from './silke-iframe-context';

type SilkeIframeCssLinkProps = { href: string };

export function SilkeIframeCssLink({ href }: SilkeIframeCssLinkProps) {
  const { doc } = useSilkeIframeContext();
  useEffect(() => {
    const head = doc?.head;
    if (head) {
      const link = doc.createElement('link');
      link.href = href;
      link.rel = 'stylesheet';
      head.appendChild(link);

      return () => link.remove();
    }
  }, [href, doc]);
  return null;
}