import { BASE_URL } from "@/Constant";
import Star200 from "@/public/assest/star200.svg";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import Link from "next/link";

export default function AboutIab({ bottom, gla, data, table }: any) {
  return (
    <div className="w-full  mx-auto py-4">
      <div className="flex flex-col space-y-16 px-4 md:px-12">
        <div className="flex flex-col lg:flex-row items-center gap-10">
          <div className="md:w-[40%]">
            <div className="bg-white rounded-2xl p-4 shadow-lg">
              <div className="aspect-square rounded-lg overflow-hidden">
                <Image
                  width={100}
                  height={100}
                  unoptimized={true}
                  src={`${BASE_URL}${bottom?.gallaryImage}`}
                  alt="Digital transformation concept"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
          <div className="flex-1 space-y-6 pt-5 md:pt-0">
            <h2>{bottom?.postTitle}</h2>
            <div className="safe">
              <SafeHtmlRenderer htmlContent={bottom?.shortContent} />
            </div>
          </div>
        </div>
        {/* Section 2 */}
        <div className="flex flex-col lg:flex-row items-center">
          <div className="flex-1  md:pt-0">
            <h2>{gla?.postTitle}</h2>

            <div className="flex flex-row md:flex-nowrap flex-wrap gap-10">
              <Image
                width={80}
                height={80}
                alt="logo"
                src={`${BASE_URL}${gla?.gallaryImage}`}
              />{" "}
              <Image
                width={80}
                height={80}
                alt="logo"
                className="grayscale"
                src={`${BASE_URL}${gla?.gallaryImage}`}
              />
            </div>
            <p className="mt-4">{gla?.postSubTitle}</p>
            {/* <div>
              <div className="flex gap-2 items-center">
                <p className="my-auto">For further information view</p>
                <Image
                  width={40}
                  height={40}
                  alt="logo"
                  src={`${BASE_URL}${gla?.gallaryImage}`}
                />
              </div>
            </div> */}
          </div>
        </div>
        {/* Section 3 */}
        <div className="flex flex-col lg:flex-row">
          <div className="flex justify-center flex-col flex-1 md:pt-0">
            <h2>{data?.postTitle}</h2>
            <div className="safe">
              <SafeHtmlRenderer htmlContent={data?.shortContent} />
            </div>
            <div className="flex gap-2">
              <div className="safe">
                <SafeHtmlRenderer htmlContent={data?.postSubTitle} />
              </div>
              <div>
                <Link
                  href="/structure"
                  className="text-black font-bold cursor-pointer"
                >
                  {data?.url}
                </Link>
              </div>
            </div>
          </div>
          <div className="md:w-[40%]">
            <div className="bg-white rounded-2xl p-4 shadow-lg">
              <div className="aspect-square rounded-lg overflow-hidden">
                <Image
                  width={100}
                  height={100}
                  unoptimized={true}
                  src={`${BASE_URL}${data?.gallaryImage}`}
                  alt="Digital transformation concept"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>
        {/* Section 4 */}
        <div className="flex flex-col lg:flex-row items-center">
          <div className="flex-1 space-y-6 pt-5 md:pt-0">
            <h2>{table?.pageTitle}</h2>
            <p>{table?.pageSubTitle}</p>
            <div className="flex flex-row items-center md:flex-nowrap flex-wrap gap-10">
              <div className="md:w-[40%]">
                <div className="bg-white rounded-2xl p-4 shadow-lg">
                  <div className="aspect-square rounded-lg overflow-hidden">
                    <Image
                      width={100}
                      height={100}
                      unoptimized={true}
                      src={`${BASE_URL}${table?.mainImage}`}
                      alt="Digital transformation concept"
                      className="w-full h-full object-cover"
                    />
                  </div>
                </div>
              </div>
              <div className="safe">
                <SafeHtmlRenderer htmlContent={table?.shortContent} />
              </div>
            </div>
          </div>
        </div>
        {/* Section 5 */}
        <div className="safe">
          <SafeHtmlRenderer htmlContent={table?.fullContent} />
        </div>
      </div>
    </div>
  );
}