import BlogDetailsPage from "@/components/Blog/BlogDetail";
import blogData from "@/components/Blog/blogData";
import { Metadata } from "next";

interface BlogDetailsPageProps {
    params: {
        slug: string;
    };
}

export async function generateMetadata(
    { params }: BlogDetailsPageProps
): Promise<Metadata> {
    const blog = blogData.find((post) => post.slug === params.slug);

    const DOMAIN = process.env.NEXT_PUBLIC_DOMAIN;

    if (!blog) {
        return {
            title: "Bài viết không tồn tại | V_LOG MEDIA",
            description: "Trang bạn tìm không tồn tại hoặc đã bị xóa.",
            icons: {
                icon: '/favicon.ico',
                shortcut: '/favicon.ico',
                apple: '/favicon.ico',
            },
            robots: {
                index: false,
                follow: false,
            },
        };
    }

    return {
        title: `${blog.title} | V_LOG MEDIA`,
        description: blog.paragraph || "V_LOG MEDIA",
        icons: {
            icon: '/favicon.ico',
            shortcut: '/favicon.ico',
            apple: '/favicon.ico',
        },
        alternates: {
            canonical: `${DOMAIN}/blog/${blog.slug}`,
        },
        openGraph: {
            title: `${blog.title} | V_LOG MEDIA`,
            description: blog.paragraph,
            url: `${DOMAIN}/blog/${blog.slug}`,
            siteName: "V_LOG MEDIA",
            type: "article",
            publishedTime: blog.publishDate,
            authors: [blog.author?.name || "V_LOG MEDIA"],
            images: [
                {
                url: `${DOMAIN}${blog.image}`,
                width: 800,
                height: 600,
                alt: blog.title,
                },
            ],
        },
        twitter: {
            card: "summary_large_image",
            title: `${blog.title} | V_LOG MEDIA`,
            description: blog.paragraph,
            images: [`${DOMAIN}${blog.image}`],
        },
        robots: {
            index: true,
            follow: true,
        },
    };
}

export async function generateStaticParams() {
    return blogData.map((post) => ({
        slug: post.slug,
    }));
}

export default function Blog({ params }: BlogDetailsPageProps) {
    return <BlogDetailsPage params={params} />
}
