import AboutUsImageTwo from "@/assets/images/about-us-two.png";
import FeaturesList from "./FeaturesList";
import { CMSItem } from "@/types/cms";
import { cmsImageUrl } from "@/services/cmsService";
import CmsPreviewImage from "@/components/preview/CmsPreviewImage";

export default async function AboutUsImageSection({ cms }: { cms: CMSItem[] }) {
  const leftImage = cmsImageUrl(cms, "left_image") || AboutUsImageTwo;

  return (
    <div className="w-full h-full relative isolate order-2 lg:order-1">
      <div className="relative mt-5 lg:h-158.75 w-[90%] h-134.25 rounded-[24px] overflow-hidden">
        <CmsPreviewImage
          sectionName="services"
          inputNameEn="left_image"
          initialSrc={leftImage}
          alt="About Us Image Two"
          fill
          className="object-cover"
        />
      </div>
      <FeaturesList cms={cms} />
    </div>
  );
}