"use client";
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";

import "swiper/css";

import Blogs from "@/utils/Blog.utils";

export default function News() {
  return (
    <section className="news-section pt_90 pb_90">
      <div className="auto-container">
        <div className="sec-title mb_50 centred">
          <span className="sub-title">Our Blog</span>
          <h2>
            Take a look at our most <br />
            recent articles
          </h2>
        </div>

        <Swiper
          modules={[Autoplay]}
          spaceBetween={30}
          slidesPerView={3}
          loop={true}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          breakpoints={{
            320: { slidesPerView: 1 },
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 3 },
          }}
        >
          {Blogs.map((blog, i) => (
            <SwiperSlide key={i}>
              <div className="news-block-one">
                <div className="inner-box">
                  <figure className="image-box">
                    <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
                      <img src={blog.thumbnail} alt={blog.title} />
                    </Link>
                  </figure>
                  <div className="lower-content">
                    <h3>
                      <Link href={`/blog/${blog.slug}`} aria-label="Blog title">
                        {blog.title.length > 40 ? blog.title.slice(0, 40) + "..." : blog.title}
                      </Link>
                    </h3>
                    <p>{blog.shortDesc}</p>
                    <div className="link">
                      <Link href={`/blog/${blog.slug}`} aria-label="Read More">
                        <span>Read More</span>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}