"use client";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import "./blog.css";

const SingleBlog = () => {
  const [blogResData, setResData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/api/blog");
        const blog = await response.json();
        setResData(blog.blogdata);
      } catch (error) {
        console.error("Error fetching blog data:", error);
      }
    };
    fetchData();
  }, []);

  return (
    <div className="max-w-4xl mx-auto p-5 space-y-6 bg-white shadow-lg rounded-lg">
      {/* Blog Image */}
      <div className="w-full flex justify-center">
        <Image
          src={"/blogs/significance-of-dhanteras.webp"}
          height={500}
          width={800}
          alt="Blog Cover Image"
          className="rounded-lg object-cover"
        />
      </div>

      {/* Blog Content */}
      <div className="prose lg:prose-xl mx-auto text-gray-800 leading-relaxed">
        {blogResData ? (
          <div dangerouslySetInnerHTML={{ __html: blogResData }} />
        ) : (
          <p className="text-center text-gray-500">Loading blog content...</p>
        )}
      </div>
    </div>
  );
};

export default SingleBlog;