/* eslint-disable @next/next/no-sync-scripts */
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { SpinnerLoading } from "./../../../components/spinner";
import { getBlogPost } from "./../../../server/utils/auth";
import BlogCard from "./../../../components/blogCard";
import parse from "html-react-parser";

const BlogPost = ({ params: { slug } }: { params: { slug: string } }) => {
  const router = useRouter();
  const [blogPost, setBlogPost] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchInfo = async () => {
      try {
        const blogData = await getBlogPost(slug);
        setBlogPost(blogData);
      } finally {
        setLoading(false);
      }
    };

    fetchInfo();
  }, [slug]);
  if (loading) {
    return <SpinnerLoading />;
  }
  console.log(blogPost.blog.content);
  return (
    <div>
      {
        //@ts-ignore
        parse(blogPost.blog.content, {
          transform(reactNode, domNode, index) {
            return <div className={"list-disc"}>{reactNode}</div>;
          },
        })
      }
    </div>
  );
};

export default BlogPost;