'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.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>
  );
}