"use client";

import Image from "next/image";
import React, { useEffect, useState } from "react";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";

const BlogData = ({ data }) => {
  return (
    <div>
      <Navbar />

      <div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
        <div className="grid grid-cols-1 gap-7  rtl">
          <div className=" mt-10 ">
            <Image
              src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${data.mainImage}`}
              width={500}
              height={500}
              className="w-[400px]"
            />
            <h1 className=" font-bold text-right xs:text-[20px] lg:text-[40px]">
              {data.title}
            </h1>
            <div></div>
            <div dangerouslySetInnerHTML={{ __html: data.content }} />
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default BlogData;