"use client";
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { blogPosts } from "../../../utils/constant.utils"; // Import blog data

const RecentBlogs = () => {
  return (
    <section className="blog-area-1 space-bottom position-relative">
      <div className="blog-shape-img1 shape-mockup d-lg-block d-none">
        <img
          className="about1-shape-img-1 spin"
          src="/assets/img/home/shape-flower.svg"
          alt="Fixturbo"
        />
      </div>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="title-area text-center">
              <span className="sub-title">Latest Blog</span>
              <h2 className="sec-title">Latest News & Blogs</h2>
            </div>
          </div>
        </div>
        <div className="row global-carousel blog-slider slider-shadow">
          <Swiper
            loop={true}
            spaceBetween={30}
            slidesPerView={2}
            slidesPerGroup={1}
            speed={1000}
            pagination={{ clickable: true }}
            autoplay={{ delay: 6000 }}
            className="mySwiper"
            breakpoints={{
              0: { slidesPerView: 1, slidesPerGroup: 1 },
              768: { slidesPerView: 2 },
              992: { slidesPerView: 3 },
              1200: { slidesPerView: 3 },
              1400: { slidesPerView: 3 },
            }}
          >
            {blogPosts.map((post) => (
              <SwiperSlide key={post.id}>
                <div className="blog-card">
                  <div className="blog-img">
                    <img src={post.image} alt={post.title} />
                    <div className="blog-date">
                      <Link href={`blog/${post?.id}`}>
                        <span>{post.date.split(" ")[0]}</span>
                        {post.date.split(" ")[1]}
                      </Link>
                    </div>
                  </div>
                  <div className="blog-content">
                    <h3 className="blog-title m-0">
                      <Link href={`blog/${post?.id}`}>
                        {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post.title}
                      </Link>
                    </h3>

                    <p>{post.shortDescription}</p>
                    <Link className="btn style-border3" href={`blog/${post?.id}`}>
                      Read More <i className="fas fa-arrow-right ms-2" />
                    </Link>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};

export default RecentBlogs;
