use dioxus::prelude::*;

#[component]
pub fn SkeletonCard() -> Element {
    rsx! {
        div { class: "skeleton-card",
            div { class: "skeleton-thumb skeleton-pulse" }
            div { class: "skeleton-text skeleton-pulse" }
            div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
        }
    }
}

#[component]
pub fn SkeletonRow() -> Element {
    rsx! {
        div { class: "skeleton-row",
            div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
            div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
            div { class: "skeleton-cell skeleton-pulse" }
            div { class: "skeleton-cell skeleton-pulse" }
        }
    }
}

#[component]
pub fn LoadingOverlay(message: Option<String>) -> Element {
    let msg = message.unwrap_or_else(|| "Loading...".to_string());
    rsx! {
        div { class: "loading-overlay",
            div { class: "loading-spinner" }
            span { class: "loading-message", "{msg}" }
        }
    }
}

#[component]
pub fn SkeletonGrid(count: Option<usize>) -> Element {
    let n = count.unwrap_or(12);
    rsx! {
        div { class: "media-grid",
            for i in 0..n {
                SkeletonCard { key: "skel-{i}" }
            }
        }
    }
}

#[component]
pub fn SkeletonList(count: Option<usize>) -> Element {
    let n = count.unwrap_or(10);
    rsx! {
        div { class: "media-list",
            for i in 0..n {
                SkeletonRow { key: "skel-row-{i}" }
            }
        }
    }
}