use dioxus::prelude::*;

/// Definition of a single tab in a [`TabBar`].
#[derive(Clone, Debug, PartialEq)]
pub struct TabDef {
    /// Display label for the tab button.
    pub label: String,
    /// Optional badge count (shown when `Some` and > 0).
    pub badge: Option<usize>,
}

/// A reusable tab bar that renders a row of tab buttons.
///
/// Only renders the tab buttons — content rendering is the caller's responsibility.
/// The caller reads `active_tab` to conditionally show the appropriate content.
///
/// Accepts an arbitrary number of tabs (designed for future Ring 3 third tab).
#[component]
pub fn TabBar(tabs: Vec<TabDef>, active_tab: Signal<usize>) -> Element {
    rsx! {
        div { class: "tab-bar",
            for (index , tab) in tabs.iter().enumerate() {
                {
                    let is_active = *active_tab.read() == index;
                    let label = tab.label.clone();
                    let badge = tab.badge;
                    rsx! {
                        button {
                            class: "tab-button",
                            "data-active": if is_active { "true" } else { "false" },
                            onclick: move |_| active_tab.set(index),
                            "{label}"
                            if let Some(count) = badge {
                                if count > 0 {
                                    span { class: "tab-badge", "{count}" }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}