export default function BlogTitle({ params }) {

  const [blogData, setBlogData] = useState(null);

  const router = useRouter(); // Initialize router for navigation

  // console.log("params", params.title);


  const title = params.title; // Directly use params.title

   const fetchData = async () => {

      try {

        if (!title) return; // Avoid calling the API if title is not present



        const response = await fetch(`http://localhost:3000/api/blog/${title}`);

        if (!response.ok) {

          throw new Error('Network response was not ok');

        }

        const data = await response.json();

        // console.log("data", data);




        setBlogData(data.blog || null);

        setRelatedPosts(data.relatedPosts || []);

      } catch (error) {

        setError(error.message);

      } finally {

        setLoading(false);

      }

    };

  useEffect(() => {

 




    fetchData();

  }, [title]);



        if (!response.ok) {

          throw new Error(`Network response was not ok: ${response.statusText}`);

        }


        const data = await response.json();

        setBlogData(prevData => ({

          ...prevData,

          like: data.like

        }));

      } catch (error) {

        console.error('Failed to update like count:', error);




        // Revert like count if the server request fails

        setBlogData(prevData => ({

          ...prevData,

          like: isLiked ? prevData.like + 1 : prevData.like - 1

        }));

      }

    }

  };



  if (!blogData) {

    return <div className='w-full  flex items-center justify-center my-4 '>No blog post found.</div>;

  }




  return (

    <div>

      <title>  {blogData.title}| Everyday Echoes</title>