use leptos::prelude::*;

#[component]
pub fn TaskservsPage() -> impl IntoView {
    view! {
        <div style="padding: 20px;">
            <h1 style="font-size: 2rem; margin-bottom: 20px; color: #333;">
                "⚙️ Task Services"
            </h1>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px;">
                <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <h3 style="margin: 0 0 10px 0; color: #666; font-size: 0.9rem;">
                        "Installed Services"
                    </h3>
                    <p style="font-size: 1.5rem; margin: 0; color: #3b82f6;">
                        "0"
                    </p>
                    <p style="margin: 10px 0 0 0; color: #999; font-size: 0.85rem;">
                        "No services installed"
                    </p>
                </div>

                <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <h3 style="margin: 0 0 10px 0; color: #666; font-size: 0.9rem;">
                        "Available Services"
                    </h3>
                    <p style="font-size: 1.5rem; margin: 0; color: #10b981;">
                        "12"
                    </p>
                    <p style="margin: 10px 0 0 0; color: #999; font-size: 0.85rem;">
                        "Ready to install"
                    </p>
                </div>
            </div>

            <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                <h2 style="font-size: 1.3rem; margin: 0 0 15px 0; color: #333;">
                    "Service Catalog"
                </h2>
                <p style="color: #666; margin: 0;">
                    "Browse and install infrastructure task services like Kubernetes, PostgreSQL, Redis, and more."
                </p>
            </div>
        </div>
    }
}
