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

import "swiper/css";
import "swiper/css/pagination";
import { Interweave } from "interweave";
import { Calendar } from "@/components/Layouts/sidebar/icons";

const Blogs = ({ blogs }: any) => {
  return (
    <section className="blogcontainer py-10 relative">
      <div className="container container-xxl px-3 ">
        <div className="flex flex-wrap -mx-3">
          <div className="w-full px-3">
            <div className="section-heading md:text-center mb-8">
              <h2 className="text-3xl font-bold">
                Our Blogs
              </h2>
            </div>
          </div>
        </div>
        <div className="flex flex-wrap -mx-3">
        <div className="relative px-3 w-full">
          <Swiper
            modules={[Navigation, Autoplay]}
            loop={true}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            navigation={{
              nextEl: ".swiper-button-next-blog-next",
              prevEl: ".swiper-button-prev-blog-next",
            }}
            spaceBetween={24}
            breakpoints={{
              0: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
              1024: {
                slidesPerView: 3,
              },
            }}
          >
            {[...blogs, ...blogs].map((blog, index) => (
              <SwiperSlide key={index}>
                <div className="blogbx flex flex-col bg-white rounded-xl overflow-hidden shadow-sm h-full">
                  <div className="blogbximg overflow-hidden">
                    <a href="#">
                      <img
                        alt="abc"
                        src={blog.images}
                        className="w-full h-[260px] object-cover hover:scale-105 transition duration-300"
                      />
                    </a>
                  </div>

                  <div className="blogbxcontent flex flex-col flex-1 p-5">
                    <div className="flex-1">
                      <span className="date flex items-center gap-2 text-sm text-gray-500 mb-3">
                        <Calendar className="w-4 h-4" />
                        <span>{blog.createdAt}</span>
                      </span>

                      <h3 className="text-lg font-semibold mb-3 line-clamp-2">
                        <a href="#">
                          {blog.title}
                        </a>
                      </h3>
                       <Interweave content={blog.description} />
                      
                    </div>

                    <a
                      className="knowmorebtn mt-5 inline-flex items-center gap-2 font-medium"
                      href="#"
                    >
                      <span>Know More</span>
                      →
                    </a>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Navigation */}
          <div className="swiper-nav mt-0">
              <div className="swiper-button-prev swiper-button-prev-blog-next"></div>
              <div className="swiper-button-next swiper-button-next-blog-next"></div>
            </div>
        </div>
        </div>

        <div className="flex flex-wrap -mx-3">
          <div className="w-full px-3 text-center mt-8">
            <a className="theme-btn" href="#">
              View All
            </a>
          </div>
        </div>
      </div>

      <div className="blogbtmimg mt-10">
        <img
          alt=""
          src="/images/blog-btm-img.png"
          className="w-full"
        />
      </div>
    </section>
  );
};

export default Blogs