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

function RequiredBullets({ 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:pl-[100px] md:flex-row items-start justify-between">
            {/* Text Content */}
            <div className="w-full md:w-1/2">
              <div className="w-full space-y-4">
                <div className="safe text-4xl md:text-3xl font-bold mb-6">
                  <SafeHtmlRenderer
                    htmlContent={data?.required?.shortContent}
                  />
                </div>
                <div className="safe">
                <SafeHtmlRenderer htmlContent={data?.required?.fullContent} />
                </div>
              </div>
            </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?.required?.mainImage}`}
                    alt="Technology"
                    className="w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={100}
                    height={100}
                    unoptimized={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default RequiredBullets;