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

export const metadata = {
  title: "Rapharehab Blog – Wellness Tips & Rehab Insights",
  description: "Explore expert articles from Rapharehab on physiotherapy, injury recovery, and wellness. Stay informed with trusted health tips and rehab advice.",
};

export default function Blog() {
  return (
    <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Blog" bannerImage="/assets/images/blog/blog-banner.webp">
      <section className="news-section sec-pad">
        <div className="auto-container">
          <div className="sec-title mb_50 centred">
            <span className="sub-title">Our Blog</span>
            <h2>Stay Updated with <br />Our Recent Blog Posts</h2>
          </div>

          <div className="row clearfix">
            {Blogs.map((blog, i) => (
              <div key={i} className="col-lg-4 col-md-6 col-sm-12 news-block">
                <div
                  className="news-block-one wow fadeInUp animated"
                  data-wow-delay={`${i * 20}ms`}
                  data-wow-duration="300ms"
                >
                  <div className="inner-box">
                    <figure className="image-box">
                      <Link href={`/blog/${blog.slug}`} aria-label="Blog Image">
                        <img src={blog.thumbnail} alt={blog.title} loading="lazy"/>
                      </Link>
                    </figure>
                    <div className="lower-content">
                      {/* <ul className="post-info mb_15 clearfix">
                        <li><Link href="#">{blog.author}</Link></li>
                        <li>{blog.date}</li>
                        <li>{blog.comments}</li>
                      </ul> */}
                      <h3>
                        {/* <Link href={`/blog/${blog.slug}`} aria-label="Our Blog Title">
                          {blog.title.split(" ").length > 5
                            ? blog.title.split(" ").slice(0, 5).join(" ") + "..."
                            : blog.title}
                        </Link> */}
                          <Link href={`/blog/${blog.slug}`} aria-label="Our Blog title">
                        {blog.title.length > 35 ? blog.title.slice(0, 35) + "..." : blog.title}
                      </Link>
                      </h3>
                      <p> {blog.shortDesc.length > 80 ? blog.shortDesc.slice(0, 80) + "..." : blog.shortDesc}</p>
                      <div className="link">
                        <Link href={`/blog/${blog.slug}`} aria-label="Read More"><span>Read More</span></Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

        </div>
      </section>
    </Layout>
  );
}