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";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Newsletter from "./Newsletter";
import DefaultImage from "@/app/admin/_components/Defaultimage";
const formatDate = (date: string | Date) => {
  const d = new Date(date);
  const day = String(d.getDate()).padStart(2, "0");
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const year = d.getFullYear();

  return `${day}-${month}-${year}`;
};

const Blogs = ({ blogs }: any) => {
  return (
    <section className="blogcontainer relative py-10">
      <div className="container-xxl container px-3">
        <div className="-mx-3 flex flex-wrap">
          <div className="w-full px-3">
            <div className="section-heading mb-8 md:text-center">
              <h2 className="text-3xl font-bold">Our Blogs</h2>
            </div>
          </div>
        </div>
        <div className="-mx-3 flex flex-wrap">
          <div className="relative w-full px-3">
            <Swiper
              modules={[Navigation, Autoplay]}
              loop={blogs?.length > 3}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
              }}
              navigation={{
                nextEl: ".swiper-button-next-blog-next",
                prevEl: ".swiper-button-prev-blog-next",
              }}
              spaceBetween={24}
              breakpoints={{
                100: {
                  slidesPerView: 1,
                  spaceBetween: 5,
                },
                260: {
                  slidesPerView: 1,
                  spaceBetween: 5,
                },
                370: {
                  slidesPerView: 1,
                  spaceBetween: 10,
                },
                574: {
                  slidesPerView: 2,
                  spaceBetween: 12,
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                992: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                1200: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
                1400: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
                1700: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
              }}
            >
              {blogs?.map((blog: any, index: number) => (
                <SwiperSlide key={index}>
                  <Link href={"/blog/" + blog.slug} className="blogbx flex flex-col overflow-hidden">
                    <div className="blogbximg overflow-hidden">
                      <a href={`/blog/${blog.slug}`}>
                        {blog.images ? (
                          <img
                            alt="abc"
                            src={blog.images}
                            className="w-full object-cover transition duration-300 hover:scale-105"
                          />
                        ) : (
                          <DefaultImage />
                        )}
                      </a>
                    </div>

                    <div className="blogbxcontent flex flex-1 flex-col p-5">
                      <div className="flex-1">
                        <span className="date">
                          <Calendar className="h-4 w-4" />
                          <span>{formatDate(blog.createdAt)}</span>
                        </span>

                        <h3 className="line-clamp-2">
                          <a href={`/blog/${blog.slug}`}>{blog.title}</a>
                        </h3>
                        <Interweave content={blog.description} />
                      </div>

                      <a
                    className="knowmorebtn mt-5 inline-flex items-center gap-2 font-medium"
                    href={`/blog/${blog.slug}`}
                  >
                    <span>Know More</span>
                    →
                  </a>
                    </div>
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>

            {/* Navigation */}
            {blogs.length > 3 && (
              <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="-mx-3 flex flex-wrap">
          <div className="mt-8 w-full px-3 text-center">
            <Link className="theme-btn" href="/blog">
              View All
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Blogs;
