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

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() {
  // Sort blogs by date in descending order (newest first)
  const sortedBlogs = [...Blogs].sort((a, b) => {
    // Parse dates in format "DD MMM YYYY" (e.g., "15 Sep 2025")
    const parseDate = (dateStr) => {
      const months = {
        'Jan': 0, 'Feb': 1, 'Mar': 2, 'Apr': 3, 'May': 4, 'Jun': 5,
        'Jul': 6, 'Aug': 7, 'Sep': 8, 'Oct': 9, 'Nov': 10, 'Dec': 11
      };
      const parts = dateStr.split(' ');
      const day = parseInt(parts[0]);
      const month = months[parts[1]];
      const year = parseInt(parts[2]);
      return new Date(year, month, day);
    };

    const dateA = parseDate(a.date);
    const dateB = parseDate(b.date);
    
    // Sort in descending order (newest first)
    return dateB - dateA;
  });

  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>

          <BlogList blogs={sortedBlogs} />

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