"use client";

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

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

interface Props {
  blogs: any[];
}

export default function BlogSection({
  blogs,
}: Props) {
  return (
    <section className="py-5">

      <div className="d-flex justify-content-between align-items-center mb-4">

        <h2 className="section-title mb-0">
          AstroTogwe in News
        </h2>

        <a
          href="#"
          className="view-all"
        >
          View All
        </a>

      </div>

      <Swiper
        modules={[Navigation]}
        spaceBetween={20}
        slidesPerView={1.2}
        breakpoints={{
          576: {
            slidesPerView: 1.5,
          },
          768: {
            slidesPerView: 2.2,
          },
          992: {
            slidesPerView: 3.2,
          },
          1200: {
            slidesPerView: 3.5,
          },
        }}
      >
        {blogs.map((blog) => (

          <SwiperSlide key={blog.id}>

            <div className="blog-card">

              <img
                src={`https://dev-admin.astrology.togwe.com/${blog.previewImage}`}
                className="blog-image"
                alt={blog.title}
              />

              <div className="blog-overlay">

                <h4>
                  {blog.title}
                </h4>

                <div className="d-flex justify-content-between mt-3">

                  <span>
                    {blog.author}
                  </span>

                  <span>
                    {new Date(
                      blog.postedOn
                    ).toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                    })}
                  </span>

                </div>

              </div>

            </div>

          </SwiperSlide>

        ))}
      </Swiper>

    </section>
  );
}