import { allBlogs } from "@/utlis/constant.utils";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import AnimatedText from "@/components/common/AnimatedText";

function truncateWords(text, wordLimit) {
  const words = text.split(" ");
  return words.length > wordLimit
    ? words.slice(0, wordLimit).join(" ") + "..."
    : text;
}

export default function Blogs() {
  const [leftBlog, ...rightBlogs] = allBlogs.slice(0, 3);

  return (
    <section
      id="blog"
      className="news-section fix section-padding fix scrollSpySection"
    >
      <div className="shape-1 float-bob-y">
        <Image
          src="/assets/img/blog/blog-left.webp"
          width={165}
          height={116}
          alt="img"
        />
      </div>
      <div className="shape-2 float-bob-x">
        <Image
          src="/assets/img/blog/blog-right.webp"
          width={165}
          height={116}
          alt="img"
        />
      </div>
      <div className="container">
        <div className="section-title text-center">
          <h6 className="wow fadeInUp">
            <i className="fa-regular fa-arrow-left-long" />
            Blog &amp; News
            <i className="fa-regular fa-arrow-right-long" />
          </h6>
          <h2 className="splt-txt wow">
            <AnimatedText text="Latest News & Blog" />
          </h2>
        </div>

        <div className="row">
          <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
            {leftBlog && (
              <div
                key={leftBlog.id}
                className="news-image-items bg-cover"
                style={{ backgroundImage: `url("${leftBlog.image}")` }}
              >
                <div className="news-content">
                  <ul>
                    <li>
                      <i className="fa-regular fa-user" />
                      {leftBlog.author.name}
                    </li>
                    <li>
                      <i className="fa-solid fa-tag" />
                      {leftBlog.category}
                    </li>
                  </ul>
                  <h3>
                    <Link href={`/news-details/${leftBlog.slug}`}>
                      {truncateWords(leftBlog.title.replace(/<[^>]+>/g, ""), 12)
                        .split("<br />")
                        .map((line, index) => (
                          <React.Fragment key={index}>
                            {line}
                            <br />
                          </React.Fragment>
                        ))}
                    </Link>
                  </h3>
                  <p className="text-white">
                    {truncateWords(leftBlog.description.replace(/<[^>]+>/g, ""), 25)}
                  </p>
                </div>
              </div>
            )}
          </div>

          <div className="col-lg-6">
            <div className="news-right-items">
              {rightBlogs.map((item) => (
                <div
                  key={item.id}
                  className="news-card-items wow fadeInUp"
                  data-wow-delay={item.delay}
                >
                  <div className="news-content">
                    <ul>
                      <li>
                        <i className="fa-regular fa-user" />
                        {item.author.name}
                      </li>
                      <li>
                        <i className="fa-solid fa-tag" />
                        {item.category}
                      </li>
                    </ul>
                    <h4>
                      <Link href={`/news-details/${item.slug}`}>
                        {truncateWords(item.title.replace(/<[^>]+>/g, ""), 8)}
                      </Link>
                    </h4>
                    <p>
                      {truncateWords(item.description.replace(/<[^>]+>/g, ""), 10)}
                    </p>
                    <Link
                      href={`/news-details/${item.slug}`}
                      className="link-btn"
                    >
                      Read More <i className="fa-regular fa-arrow-right-long" />
                    </Link>
                  </div>
                  <div className="news-image">
                    <Image
                      src={item.image}
                      width={247}
                      height={258}
                      alt="img"
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}