export function BlogPostBox({
  className,
  children,
  uid,
  setControlContextData,
}: BlogPostBoxProps) {
  const res = useFetchBlogPost({ uid });

  const inEditor = useContext(PlasmicCanvasContext);

  async function loadEditorOptions() {
    const allBlogPosts = await fetchBlogPosts({ limit: 20 });

    setControlContextData({
      allBlogPosts,
    });
  }

  useEffect(() => {
    if (inEditor) {
      loadEditorOptions();
    }
  }, []);

  if (!res.data) {
    return null;
  }

  return (
    <div className={className}>
      <BlogPostDataProvider
        post={res.data.post}
        author={res.data.author}
        topic={res.data.topic}
      >
        {children}
      </BlogPostDataProvider>
    </div>
  );
}