use leptos::prelude::*;

#[component]
pub fn NotFound() -> impl IntoView {
    view! {
        <div style="padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px;">
            <div style="text-align: center;">
                <h1 style="font-size: 6rem; margin: 0; color: #3b82f6;">
                    "404"
                </h1>
                <h2 style="font-size: 2rem; margin: 20px 0; color: #333;">
                    "Page Not Found"
                </h2>
                <p style="color: #666; margin-bottom: 30px; font-size: 1.1rem;">
                    "The page you are looking for does not exist or has been moved."
                </p>
                <a
                    href="/"
                    style="padding: 12px 24px; background: #3b82f6; color: white; text-decoration: none; border-radius: 6px; font-weight: 500; display: inline-block;"
                >
                    "← Back to Dashboard"
                </a>
            </div>
        </div>
    }
}