//! Unified NotFound Page Component

use leptos::prelude::*;
use rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;

#[component]
pub fn UnifiedNotFoundPage(
    #[prop(default = rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
) -> impl IntoView {
    // Clean closure pattern that works with Leptos ownership model
    // Use DRY content accessor helper
    let content = create_content_provider_reactive(lang_content.clone());

    view! {
      <div class="ds-bg-page">
        <section class="relative py-ds-4 ds-container ds-rounded-lg ds-shadow-lg">
          <div class="mx-auto max-w-4xl text-center">
            <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl mb-ds-4">
              // {content.t("not-found-title")}
            </h1>
            <rustelo_components_leptos::HtmlContent
              content={content.t("not-found-description")}
              class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto".to_string()
            />
          </div>
        </section>

        <section class="py-ds-6 ds-bg ds-rounded-lg">
          <div class="ds-container-lg ds-container">
            <div class="max-w-4xl mx-auto">
              <h2 class="text-3xl font-bold ds-text mb-ds-6">
                {content.t("not-found-section-title")}
              </h2>
              <p class="ds-text-secondary space-y-4">
                {content.t("not-found-help-text")}
              </p>
              <div class="mt-ds-6 flex flex-wrap justify-center gap-4">
                <a href={content.t("not-found-home-url")} class="btn btn-primary">
                  {content.t("not-found-go-home")}
                </a>
                <a href={content.t("not-found-login-url")} class="btn btn-secondary">
                  {content.t("not-found-sign-in")}
                </a>
                <a href={content.t("not-found-contact-url")} class="btn btn-outline">
                  {content.t("not-found-contact-us")}
                </a>
                <a href={content.t("not-found-blog-url")} class="btn btn-ghost">
                  {content.t("not-found-back-to-blog")}
                </a>
              </div>
            </div>
          </div>
        </section>
      </div>
    }
}
