import SlotImage from "@/components/SlotImage";
import { onlineProgramText } from "@/data/home";
import type { SlotOverlay } from "@/lib/static-images";
import { parseAspectRatio } from "@/lib/static-images";

type OnlineProgramSectionProps = {
  banner: SlotOverlay;
};

export default function OnlineProgramSection({ banner }: OnlineProgramSectionProps) {
  const image = banner.items[0];
  const ratio = parseAspectRatio(banner.aspectRatio);

  return (
    <div className="wb-frame" id="section2">
      <section
        id="online-program"
        className="testimonial-area testimonial-default-area rtl position-relative"
        style={{ backgroundColor: "#FFFFFF" }}
      >
        <div className="container-xxl">
          <div className="row">
            <div className="col-lg-6 order-force-2">
              <div className="section-title stitle-style2">
                <h2
                  className="title mb-0"
                  style={{ letterSpacing: 0, fontWeight: 300, fontSize: "40px" }}
                >
                  گوشیتو مربیت کن!
                </h2>
                <p
                  className="mb-0"
                  style={{
                    letterSpacing: "5px",
                    fontWeight: 100,
                    fontFamily: "montserrat",
                    color: "#C1C1C1",
                    fontSize: "10px",
                  }}
                >
                  ONLINE PROGRAM
                </p>
              </div>
              <div className="testimonial-content">
                <div className="testimonial-slider-content">
                  <div className="testimonial-slider-container">
                    <div className="testimonial-slider">
                      <div className="testimonial-single">
                        <div className="client-content">
                          <p
                            style={{
                              letterSpacing: "0px",
                              fontWeight: 200,
                              fontSize: "15px",
                              textAlign: "justify",
                              color: "#2c2c2c",
                            }}
                            dangerouslySetInnerHTML={{ __html: onlineProgramText }}
                          />
                        </div>
                        <a className="btn-theme" href="#online-program">
                          <span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-6 order-force-1">
              <div className="bg-img text-center">
                {image ? (
                  <SlotImage
                    className="mr-5"
                    style={{
                      height: ratio ? undefined : "450px",
                      width: "auto",
                      maxWidth: "100%",
                      ...(ratio ? { aspectRatio: ratio, height: "auto", maxHeight: "450px" } : {}),
                    }}
                    src={image.image}
                    alt={image.title || "برنامه آنلاین"}
                    fallbackSrc={image.fallbackSrc}
                  />
                ) : null}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}