/// ProjectGrid — responsive grid of ProjectBox cards.
///
/// Mirrors the Svelte app's ProjectGrid.svelte: CSS grid with
/// auto-fit columns, minimum 28rem each.

use dioxus::prelude::*;

use crate::state::{AgentStatus, ProjectConfig};
use crate::components::project_box::ProjectBox;

#[component]
pub fn ProjectGrid(projects: Vec<ProjectConfig>) -> Element {
    // Assign different demo statuses to show variety
    let statuses = vec![
        AgentStatus::Running,
        AgentStatus::Idle,
        AgentStatus::Done,
        AgentStatus::Stalled,
    ];

    rsx! {
        div { class: "project-grid",
            for (i, project) in projects.iter().enumerate() {
                ProjectBox {
                    key: "{project.id}",
                    project: project.clone(),
                    initial_status: statuses[i % statuses.len()],
                }
            }
        }
    }
}