use leptos::prelude::*;
use leptos_router::{components::A, hooks::use_params_map};

use crate::wgpu_renderer::WgpuTriangle;

#[derive(Clone)]
pub struct ArticleMetadata {
    pub title: &'static str,
    pub slug: &'static str,
    pub description: &'static str,
}

#[component]
pub fn ArticlePage() -> impl IntoView {
    let params = use_params_map();
    // let slug = move || params.with(|params| params.get("slug").unwrap_or_default());

    // let article_content = move || match slug().as_str() {
    //     "creating-an-actually-perfect-grid-shader" => view! {
    //         <div class="article grid-shader-article">
    //             <h1>"Creating an actually perfect grid shader"</h1>
    //             <div class="article-metadata">
    //                 <p class="date">"March 9, 2024"</p>
    //             </div>

    //             <p>"Grid shaders are essential for many visualization and design applications, but creating the perfect grid involves some nuanced considerations."</p>

    //             <h2>"Basic Triangle Rendering"</h2>
    //             <p>"Before we get to grids, let's start with a basic triangle rendering implementation using WebGL:"</p>

    //             <div class="visualization">
    //                 <WgpuTriangle />
    //             </div>

    //             <h2>"Building the Grid Shader"</h2>
    //             <p>"The key to a perfect grid shader lies in the precision of the grid lines and the handling of coordinate spaces."</p>

    //             <h2>"Avoiding Common Pitfalls"</h2>
    //             <p>"Many grid implementations suffer from aliasing issues or precision problems at certain scales."</p>

    //             <h2>"Conclusion"</h2>
    //             <p>"With the right approach, you can create grid shaders that look perfect at any scale."</p>
    //         </div>
    //     },
    //     "minimal-example-article" => view! {
    //         <div class="article minimal-article">
    //             <h1>"Minimal Example Article"</h1>
    //             <div class="article-metadata">
    //                 <p class="date">"March 9, 2024"</p>
    //             </div>

    //             <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl."</p>

    //             <h2>"Section One"</h2>
    //             <p>"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>

    //             <h2>"Section Two"</h2>
    //             <p>"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
    //         </div>
    //     },
    //     _ => view! {
    //         <div class="article-not-found">
    //             <h1>"Article Not Found"</h1>
    //             <p>"The article you're looking for doesn't exist."</p>
    //             <A href="/">"Return to Home"</A>
    //         </div>
    //     },
    // };

    view! {
        <div class="article-page">
            <nav class="article-nav">
                <A href="/">"← Back to Home"</A>
            </nav>
        // {article_content}
        </div>
    }
}
