"use client"; import { useState, useEffect, useCallback } from "react"; import { useParams } from "next/navigation"; import Link from "next/link"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowLeft, Clock, Eye, Calendar, User, Tag, ChevronDown, Sparkles, BookOpen, } from "lucide-react"; import { fetchBlog, fetchBlogs } from "@/lib/api"; import type { Blog, BlogFAQ } from "@/lib/types"; import { cn } from "@/lib/utils"; // ── Helpers ─────────────────────────────────────────────────────────────────── function formatDate(iso: string) { try { return new Date(iso).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric", }); } catch { return iso; } } // ── FAQ Accordion ───────────────────────────────────────────────────────────── function FAQItem({ faq, index }: { faq: BlogFAQ; index: number }) { const [open, setOpen] = useState(false); return (
{open && (

{faq.answer}

 )}
); } // ── Related article card ────────────────────────────────────────────────────── function RelatedCard({ blog }: { blog: Blog }) { return (
{blog.category}

{blog.title}

{blog.readTime} min {formatDate(blog.publishedAt)}
); } // ── Skeleton ────────────────────────────────────────────────────────────────── function BlogSkeleton() { return (
{Array.from({ length: 8 }).map((_, i) => (
))}
); } // ── Main Page ───────────────────────────────────────────────────────────────── export default function BlogDetailPage() { const params = useParams(); const slug = params?.slug as string; const [blog, setBlog] = useState(null); const [related, setRelated] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const load = useCallback(async () => { if (!slug) return; setLoading(true); setError(null); try { const b = await fetchBlog(slug); setBlog(b); // Fetch related blogs (same category) try { const rel = await fetchBlogs({ category: b.category, limit: 3, status: "published" }); setRelated((rel.blogs ?? []).filter((r) => r.id !== b.id).slice(0, 3)); } catch { // Related articles are optional } } catch { setError("Blog post not found or failed to load."); } finally { setLoading(false); } }, [slug]); useEffect(() => { load(); }, [load]); if (error) { return (

{error}

Back to Blog
); } return (
{/* Hero */}
Back to Blog {loading ? (
) : blog ? (
{blog.category} {blog.aiGenerated && ( DriveHub Editorial )}

{blog.title}

{blog.author} {formatDate(blog.publishedAt)} {blog.readTime} min read {blog.views > 0 && ( {blog.views.toLocaleString()} views )}
) : null}
{/* Main content */}
{loading ? ( ) : blog ? (
{/* Article body */}
{/* Tags */} {blog.tags?.length > 0 && (
{blog.tags.map((tag) => ( {tag} ))}
)} {/* Excerpt */} {blog.excerpt && (

{blog.excerpt}

)} {/* Main HTML content */}
{/* FAQ Section */} {blog.faqSchema?.length > 0 && (

? Frequently Asked Questions

{blog.faqSchema.map((faq, i) => ( ))}
)} {/* Related Articles */} {related.length > 0 && (

Related Articles

{related.map((r) => ( ))}
)}
{/* Sidebar */}
) : null}
); }