
import Footer from "@/components/Footer/Footer";
import FAQ from "@/components/FAQ/FAQ";
import Image from "next/image";
import Link from "next/link";
import styles from "./blogDetail.module.css";
import { blogData } from "@/utils/constant";
import { Metadata } from "next";

// Generate metadata for each blog post
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
    const { id } = await params;
    const blog = blogData.find((b) => b.slug === id);

    if (!blog) {
        return {
            title: "Blog Post Not Found | Antalya Restaurant",
            description: "The requested blog post could not be found.",
        };
    }

    return {
        title: `${blog.title} | Antalya Restaurant`,
        description: blog.excerpt,
        openGraph: {
            title: blog.title,
            description: blog.excerpt,
            images: [
                {
                    url: blog.image,
                    width: 1200,
                    height: 630,
                    alt: blog.title,
                },
            ],
        },
    };
}

// Generate static paths for all blog posts
export function generateStaticParams() {
    return blogData.map((blog) => ({
        id: blog.slug,
    }));
}

export default async function BlogDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const slug = id;
    const blog = blogData.find((b) => b.slug === slug);

    if (!blog) {
        return (
            <main className={styles.main}>

                <div className={styles.errorContainer}>
                    <h1 className={styles.errorTitle}>Blog Post Not Found</h1>
                    <Link href="/antalya-turkish-food-blog" className={styles.backLink}>Back to Blog</Link>
                </div>
                <Footer />
            </main>
        );
    }

    return (
        <main className={styles.main}>


            {/* Banner Section */}
            <section className={styles.hero} style={{ backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${blog.banner})` }}>
                <div className={styles.heroContent}>
                    <h1 className={styles.heroTitle}>{blog.title}</h1>
                    <p className={styles.breadcrumb}>
                        <Link href="/">Home</Link> / <Link href="/antalya-turkish-food-blog">Blog</Link> / {blog.title}
                    </p>
                </div>
            </section>


            {/* Blog Content */}
            <article className={styles.article}>
                <div className={styles.contentContainer}>
                    {/* Meta Information */}

                    {/* Featured Image */}
                    {blog.detailImage && (
                        <div className={styles.featuredImage}>
                            <Image
                                src={blog.detailImage}
                                alt={blog.title}
                                width={1200}
                                height={600}
                                style={{ objectFit: 'cover' }}
                                loading="lazy"
                            />
                        </div>
                    )}

                    <div className={styles.meta}>
                        <span className={styles.category}>{blog.category}</span>
                        <span className={styles.separator}>|</span>
                        <span className={styles.date}>{blog.date}</span>
                        <span className={styles.separator}>|</span>
                        <span className={styles.comments}>{blog.comments}</span>
                    </div>


                    {/* Blog Content */}
                    <div
                        className={styles.content}
                        dangerouslySetInnerHTML={{ __html: blog.content }}
                    />

                    {/* FAQ Section */}
                    {blog.faqs && blog.faqs.length > 0 && (
                        <FAQ faqs={blog.faqs} />
                    )}


                    {/* Navigation */}
                    <div className={styles.navigation}>
                        <Link href="/antalya-turkish-food-blog" className={styles.backButton}>← Back to All Blogs</Link>
                    </div>
                </div>
            </article>


            <Footer />
        </main>
    );
}