import Link from "next/link";
import Layout from "@/components/layout/Layout";
import Blogs from "@/utils/constant.utils";

export const metadata = {
  title: "Street-Food Stories from Sixty5 Street",
  description: "Dive into the Sixty5 Street blog for behind-the-scenes stories, flavor experiments, new dish launches and street-food culture updates.",
};

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, "");
};

const truncateTitle = (text, limit) => {
  if (!text) return "";
  return text.length > limit ? text.slice(0, limit) + "..." : text;
};

export default function Blog() {
  return (
    <Layout
      headerStyle={2}
      footerStyle={2}
      breadcrumbTitle="Blog"
      bgImage={"/assets/images/inner-banner/blog-banner.webp"}
    >
      <div className="sidebar-page-container">
        <div className="auto-container">
          <div className="sec-title mb-4 centered">
            <div className="title">Our Blogs</div>
            <h2>Explore Our Delicious Dishes</h2>
            <div className="separate"></div>
          </div>

          <div className="row clearfix">
            {Blogs.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">
                    <h4 className="mb-2 text-lg font-semibold blog-title-hover">
                      <Link href={`/blog/${blog.slug}`} className="blog-title-link">
                        {truncateTitle(stripHtml(blog.title), 30)}
                      </Link>
                    </h4>

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

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