use leptos::prelude::*;

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

            <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;">
                    "Cluster Overview"
                </h2>
                <p style="color: #666; margin: 0;">
                    "No clusters configured. Create your first cluster to get started."
                </p>
            </div>

            <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;">
                <h2 style="font-size: 1.3rem; margin: 0 0 15px 0; color: #333;">
                    "Quick Actions"
                </h2>
                <div style="display: flex; gap: 10px;">
                    <button style="padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                        "Create Cluster"
                    </button>
                    <button style="padding: 10px 20px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                        "Import Cluster"
                    </button>
                </div>
            </div>
        </div>
    }
}
