import QuestionImageOne from "@/assets/images/question-section-one.jpg";
import QuestionImageTwo from "@/assets/images/question-section-two.jpg";
import QuestionImageFullHeight from "@/assets/images/question-section-full-height.jpg";
import { CMSItem } from "@/types/cms";
import { cmsImageUrl } from "@/services/cmsService";
import CmsPreviewImage from "@/components/preview/CmsPreviewImage";

export default function QuestionImages({ cms }: { cms: CMSItem[] }) {
  const imageOne = cmsImageUrl(cms, "image_1") || QuestionImageOne;
  const imageTwo = cmsImageUrl(cms, "image_2") || QuestionImageTwo;
  const imageFullHeight = cmsImageUrl(cms, "image_3") || QuestionImageFullHeight;

  return (
    <div className="grid grid-cols-2 gap-5 items-stretch lg:order-2">
      <div className="flex flex-col gap-5">
        <div className="relative w-full h-[200px] sm:h-[250px] md:h-[250px] lg:h-[250px] rounded-[24px] overflow-hidden">
          <CmsPreviewImage
            sectionName="faq"
            inputNameEn="image_1"
            initialSrc={imageOne}
            alt="Question Image One"
            fill
            className="object-cover"
          />
        </div>
        <div className="relative w-full h-[200px] sm:h-[250px] md:h-[250px] lg:h-[250px] rounded-[24px] overflow-hidden">
          <CmsPreviewImage
            sectionName="faq"
            inputNameEn="image_2"
            initialSrc={imageTwo}
            alt="Question Image Two"
            fill
            className="object-cover"
          />
        </div>
      </div>
      <div className="relative h-[calc(200px*2+1.25rem)] sm:h-[calc(250px*2+1.25rem)] md:h-[calc(250px*2+1.25rem)] lg:h-[calc(250px*2+1.25rem)] rounded-[24px] overflow-hidden">
        <CmsPreviewImage
          sectionName="faq"
          inputNameEn="image_3"
          initialSrc={imageFullHeight}
          alt="Question Image Full Height"
          fill
          className="object-cover"
        />
      </div>
    </div>
  );
}