import { BASE_URL } from "@/Constant";
import Arrow from "@/public/assest/gis_north-arrow.svg";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";

function RulesBullets({ 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 */}
            <div className="safe">

            <SafeHtmlRenderer htmlContent={data?.fullContent} />
            </div>

            {/* Image Grid */}
            <div className="w-full md:w-1/2 md:relative md:left-[55px]">
              <div className="bg-btn p-8 rounded-3xl">
                <div className=" p-6 bg-white">
                  <Image
                    src={`${BASE_URL}${data?.mainImage}`}
                    alt="Technology"
                    className="w-[100%] md:w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={50}
                    height={30}
                    unoptimized={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RulesBullets;