'use client'
import Link from "next/link";
import Blogs from "@/utils/constant.utils";

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

const stripHtml = (html) => {
  if (!html) return "";
  return html.replace(/<[^>]*>/g, "");
};

export default function Blog() {
  return (
    <div className="sidebar-page-container">
      <div className="auto-container">
        <div className="row clearfix">
          {Blogs.sort((a, b) => new Date(b.date) - new Date(a.date)).slice(0, 3).map((blog) => (
            <div
              key={blog.id}
              className="col-lg-4 col-md-6 col-sm-12 mb-4"
            >
              <div className="blog-card rounded shadow-sm overflow-hidden">
                {/* Blog Image */}
                <div className="blog-image">
                  <img
                    src={blog.imageDetail}
                    alt={blog.title}
                    className="img-fluid w-100"
                  />
                </div>

                {/* Blog Title */}
                <div className="blog-content p-3">
                  <h3 className="mb-2 text-lg font-semibold blog-title-hover">
                    <Link href={`/blog/${blog.slug}`} className="blog-title-link">
                      {truncateWords(stripHtml(blog.title), 6)}
                    </Link>
                  </h3>

                  {/* Blog Excerpt */}
                  <p className="text-gray-700 mb-3">
                    {truncateWords(stripHtml(blog.para), 28)}
                  </p>

                  {/* Read More Button */}
                  <Link
                    href={`/blog/${blog.slug}`}
                    className="font-medium blog-title-link"
                  >
                    Read More
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
