import React, { useEffect, useState } from "react";
import Link from "next/link";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";

import { getPricing } from "@/services/cmsService";
import { sanitizeCmsHtml } from "@/utils/safeHtml";

const Pricing = () => {
  const [pricingData, setPricingData] = useState([]);

  const fetchPricingData = async () => {
    try {
      const response = await getPricing();
      setPricingData(response.data || []);
    } catch (error) {
      console.error("Error fetching pricing data:", error);
    }
  };

  useEffect(() => {
    fetchPricingData();
  }, []);

  return (
    <section className="packagecontainer">
      <div className="packageinner">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xxl-8 col-xl-8 col-lg-11 col-md-12 col-sm-12 col-12">
              <div
                className="section-heading text-center"
                data-aos="zoom-in-down"
                data-aos-delay={1000}
                data-aos-duration={500}
              >
                <div className="subheading">Pricing</div>
                <h2>Our Affordable Pricing</h2>
              </div>
            </div>
          </div>

          <div className="row">
            <div
              className="col-12"
              data-aos="fade-up"
              data-aos-delay={1000}
              data-aos-duration={500}
            >
              <Swiper
                modules={[Navigation, Autoplay]}
                autoplay={{
                  delay: 4000,
                  disableOnInteraction: false,
                  pauseOnMouseEnter: true,
                }}
                navigation={{
                  nextEl: ".pricing-swiper-next",
                  prevEl: ".pricing-swiper-prev",
                }}
                slidesPerView={3}
                spaceBetween={40}
                breakpoints={{
                  0: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                  },
                  400: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                  },
                  480: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                  },
                  768: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                  },
                  992: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                  },
                  1200: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                  },
                  1600: {
                    slidesPerView: 3,
                    spaceBetween: 50,
                  },
                }}
                className="pricing-swiper"
              >
                {pricingData?.map((item) => (
                  <SwiperSlide key={item.id}>
                    <div className="packagebtx">
                      <div className="packageheader">
                        <h3>{item?.name}</h3>

                        <p>{item?.title}</p>

                        <div
                          dangerouslySetInnerHTML={{
                            __html: sanitizeCmsHtml(
                              (item?.description || "").replaceAll("classname", "class")
                            ),
                          }}
                        />
                      </div>

                      <div className="packagefooter">
                        <div className="packagepriceouter d-none">
                          <div className="priceouter">
                            <span className="price">
                              $99.<span>00</span>
                            </span>

                            <span className="month">/month</span>
                          </div>

                          <div className="yearprice">
                            or <span>$1000</span>/Year
                          </div>
                        </div>

                        <Link href="/contact" className="theme-btn w-100">
                          Contact Us
                        </Link>

                        <p>*Billed monthly, cancel anytime</p>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>

              <div className="pricing-swiper-nav">
                <button className="pricing-swiper-prev" type="button">
                  <i className="icon icon-arrow-long-left"></i>
                </button>

                <button className="pricing-swiper-next" type="button">
                  <i className="icon icon-arrow-long-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Pricing;