import Image from "next/image";
import Star200 from "@/public/assest/star200.svg";
import back200 from "@/public/assest/aboutImage.png";
import { BASE_URL } from "@/Constant";

export default function ApplyCertification({ image, data }: any) {
  return (
    <div className="w-full max-w-7xl mx-auto bg-btn-ob py-4">
      <div className="relative p-8 md:p-12">
        <div className="flex flex-col lg:flex-row items-center">
          {/* Images Section */}
          <div className="w-full lg:w-auto">
            <div className=" rounded-2xl p-7 shadow-lg md:relative md:w-[83%]">
              <div className="">
                <div className="aspect-square rounded-lg overflow-hidden">
                  <Image
                    width={100}
                    height={100}
                    unoptimized={true}
                    src={`${BASE_URL}${image}`}
                    alt="Digital transformation concept"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
          {/* Content Section */}
          <div className="flex-1 space-y-6 pt-5 md:pt-0 md:relative">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-8">
              {data?.postCategory?.category}
            </h2>

            <div className="space-y-6">
              {data?.member.map((data: any, i: any) => {
                return (
                  <div key={i} className="flex items-start gap-3">
                    <div className="w-6 h-6 mt-1 flex-shrink-0">
                      {/* <img src="images/star200.svg" alt="star200" /> */}
                      <Image
                        src={Star200}
                        alt="External Image"
                        width={50}
                        height={30}
                        unoptimized={true}
                      />
                    </div>
                    <p className="text-lg text-gray-700">{data?.postTitle}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}