import { BASE_URL } from "@/Constant";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

function RulesAboutIab({ data }: any) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="">
        {/* Hero Section */}
        <div className="container mx-auto px-4 py-16 md:py-16">
          <div className="flex flex-col md:flex-row items-center justify-between gap-12">
            {/* Text Content */}
            {/* Image Grid */}
            <div className="w-full md:w-1/2 md:relative md:-left-[48px]">
              <div className="bg-btn p-8 rounded-3xl ">
                <div className="p-6 bg-white">
                  <Image
                    src={`${BASE_URL}${data?.gallaryImage}`}
                    alt="Technology"
                    className="rounded-lg w-[100%] md:relative md:left-[91px] md:w-[75%] shadow-lg hover:transform hover:scale-105 transition-transform duration-300"
                    width={50}
                    height={30}
                    unoptimized={true}
                  />
                </div>
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <div className="w-full space-y-4">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-8">
                  {data?.postTitle}
                </h2>
                <div className="safe">
                <SafeHtmlRenderer htmlContent={data?.shortContent} />

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

export default RulesAboutIab;