"use client";

import Image from "next/image";
import React, { useContext, useEffect, useState } from "react";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import "../BlogComponents/styleBlog.css";
import TimerDown from "@comp/TimerDown/TimerDown";
import TimerDownBlog from "@comp/TimerDown/TimerDown";
import PersianNumber from "plugins/PersianNumber";
import SliderProductsOffer from "../BlogComponents/SliderProductsOffer/page";
import AppContext from "@ctx/AppContext";
const BlogData = ({ data }) => {
  const CTX = useContext(AppContext);

  const specialOfferData = CTX.state.specialOfferData;

  useEffect(() => {
    if (specialOfferData.length <= 0) {
      CTX.fetchSpecialOffer();
    }
  }, []);
  return (
    <div>
      <Navbar />

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

          <div className="mt-10 lg:col-span-2 rtl ">
            <SliderProductsOffer data={specialOfferData} />
          </div>
        </div>
      </div>

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

export default BlogData;