"use client";

import Link from "next/link";
import type { BlogPost } from "@/services/joomlaService";

interface ServiceBlogSectionProps {
  serviceBlog: { url: string; posts: (BlogPost & { href: string })[] } | null;
}

/**
 * `service.php`'s Old-layout `blog_section` — "Read Our Latest {X}
 * Blogs", scoped to the real blog sub-category matching this
 * article's alias (see `getServiceBlogPosts`). Real class names in
 * the comments below are the live site's, for reference; markup
 * here is Tailwind, matching this app's convention for
 * template-authored (non-CMS-body) sections.
 */
export function ServiceBlogSection({ serviceBlog }: ServiceBlogSectionProps) {
  if (!serviceBlog || serviceBlog.posts.length === 0) return null;

  return (
    <section className="bg-white py-10 sm:py-14">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* .sitelink */}
        <p className="text-center text-xs font-semibold uppercase tracking-wide text-[#f58e0e]">
          - Latest Blogs -
        </p>
        {/* .heading */}
        <h2 className="mt-1 text-center text-2xl sm:text-[28px] font-bold text-[#2a2a2a]">
          Read Our Latest {serviceBlog.url} Blogs
        </h2>
        {/* .sub-heading */}
        <p className="mx-auto mt-2 max-w-2xl text-center text-sm text-slate-500">
          By High Quality Assignment experts on university, academics, assignment, writing skills &amp; tips,
          and many more
        </p>

        {/* .blog_list — horizontal swipeable row on mobile (matching the
            same real pattern `HomeBlogTabs` uses on the live site:
            `overflow-x:auto`, each card ~90% width so the next one peeks at
            the edge) rather than full-width cards stacked vertically; a
            normal grid from `sm:` up, same as before. */}
        <div className="mt-8 flex overflow-x-auto gap-4 -mx-4 px-4 pb-2 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] sm:mx-0 sm:px-0 sm:pb-0 sm:grid sm:grid-cols-2 sm:overflow-visible lg:grid-cols-3 sm:gap-6">
          {serviceBlog.posts.map((post) => (
            // .blog-box
            <Link
              key={post.id}
              href={post.href}
              className="shrink-0 w-[85%] snap-start sm:w-auto block rounded-[3px] bg-white shadow-[0_3px_6px_rgba(0,0,0,0.16)] hover:shadow-[0_3px_12px_rgba(0,0,0,0.3)] transition-shadow overflow-hidden"
            >
              {post.imageUrl && (
                // eslint-disable-next-line @next/next/no-img-element -- real CMS-hosted image
                <img
                  src={post.imageUrl}
                  alt="Blog"
                  className="h-[180px] w-full object-cover"
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.onerror = null;
                    target.src = "/images/blog.jpg";
                  }}
                />
              )}
              <div className="p-4">
                {/* .date */}
                <p className="text-xs text-slate-400">
                  {new Date(post.createdAt).toLocaleDateString("en-GB", {
                    day: "2-digit",
                    month: "short",
                    year: "numeric",
                  })}
                </p>
                {/* .blog-title */}
                <p className="mt-1.5 text-base font-semibold text-[#2a2a2a] line-clamp-2">{post.title}</p>
                {/* .read-more */}
                <span className="mt-2 inline-block text-sm font-medium text-[#f58e0e]">Read More</span>
              </div>
            </Link>
          ))}
        </div>

        {/* .button "View More" — the live button triggers a JS AJAX
            loader (`onclick="blog()"`) that isn't in service.php
            itself, so this points at the real destination closest to
            it: the full blog listing. */}
        <div className="mt-8 text-center">
          <Link
            href="/blog"
            className="inline-block rounded-[3px] bg-[#f58e0e] px-6 py-2.5 text-sm font-semibold text-white hover:bg-[#e07d0d] transition-colors"
          >
            View More
          </Link>
        </div>
      </div>
    </section>
  );
}