//! Progress bar component for displaying completion percentage
//!
//! Follows L-COMPONENT-PROPS and L-TRACK-FINE-GRAINED patterns.
//! Displays a visual progress bar with percentage label.

/// Generate progress bar HTML
///
/// Creates a visual progress bar with optional label.
/// Percentage is clamped between 0-100.
pub fn progress_bar_html(percentage: f64, label: Option<&str>) -> String {
    let clamped = percentage.clamp(0.0, 100.0);
    let color = if clamped >= 75.0 {
        "bg-green-600"
    } else if clamped >= 50.0 {
        "bg-yellow-600"
    } else {
        "bg-blue-600"
    };

    let label_html = label
        .map(|l| {
            format!(
                r#"<div class="flex justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">{}</span>
                    <span class="text-sm font-medium text-gray-700">{:.1}%</span>
                </div>"#,
                l, clamped
            )
        })
        .unwrap_or_default();

    format!(
        r#"<div>
            {}
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="h-2.5 rounded-full transition-all duration-300 {}" style="width: {}%"></div>
            </div>
        </div>"#,
        label_html, color, clamped
    )
}
