import React from "react";
import Link from "next/link";
import { ArrowLeft, Zap } from "lucide-react";
import type { JoomlaArticle } from "@/services/joomlaService";
import type { NavigationResponse } from "@/types/navigation";
import { Button } from "@/components/common/Button";

interface GenericArticlePageProps {
  article: JoomlaArticle;
  navigationData: NavigationResponse;
  articleBody: React.ReactNode;
}

/**
 * The final fallback branch for articles that are neither Samples,
 * Questions, Blog, Services, nor one of the free-tool pages — a plain
 * breadcrumb + title + body card.
 */
export function GenericArticlePage({ article, navigationData, articleBody }: GenericArticlePageProps) {
  return (
    <div className="py-12 bg-slate-50 min-h-[60vh]">
      <div className="mx-auto px-4 sm:px-6 lg:px-8 space-y-8 max-w-5xl">
        {/* Page Breadcrumb / Top Bar */}
        <div className="flex items-center justify-between border-b border-slate-200 pb-4">
          <div className="flex items-center gap-2 text-xs text-slate-500">
            <Link href="/" className="hover:text-[#5C7A36] flex items-center gap-1 font-semibold">
              <ArrowLeft className="w-3.5 h-3.5" /> Home
            </Link>
            <span>/</span>
            <span className="font-extrabold text-slate-800">{article.title}</span>
          </div>

          <Button
            href={navigationData.header.cta.orderNowUrl}
            variant="primary"
            size="sm"
            icon={<Zap className="w-3.5 h-3.5 fill-current" />}
          >
            Order Now
          </Button>
        </div>

        <div className="space-y-6">
          <h1 className="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
            {article.title}
          </h1>
          {articleBody}
        </div>
      </div>
    </div>
  );
}