use leptos::prelude::*;

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

            <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
                <h2 style="font-size: 1.3rem; margin: 0 0 15px 0; color: #333;">
                    "General Settings"
                </h2>
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; color: #666; font-weight: 500;">
                        "Theme"
                    </label>
                    <select style="width: 100%; max-width: 300px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option>"Light"</option>
                        <option>"Dark"</option>
                        <option>"Auto"</option>
                    </select>
                </div>
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; color: #666; font-weight: 500;">
                        "Language"
                    </label>
                    <select style="width: 100%; max-width: 300px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option>"English"</option>
                        <option>"Spanish"</option>
                        <option>"French"</option>
                    </select>
                </div>
            </div>

            <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
                <h2 style="font-size: 1.3rem; margin: 0 0 15px 0; color: #333;">
                    "API Configuration"
                </h2>
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; color: #666; font-weight: 500;">
                        "Orchestrator URL"
                    </label>
                    <input
                        type="text"
                        value="http://localhost:8080"
                        style="width: 100%; max-width: 400px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
                    />
                </div>
                <div style="margin-bottom: 15px;">
                    <label style="display: block; margin-bottom: 5px; color: #666; font-weight: 500;">
                        "API Token"
                    </label>
                    <input
                        type="password"
                        placeholder="Enter API token"
                        style="width: 100%; max-width: 400px; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
                    />
                </div>
            </div>

            <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;">
                    "Save Settings"
                </button>
                <button style="padding: 10px 20px; background: #6b7280; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                    "Reset to Defaults"
                </button>
            </div>
        </div>
    }
}
