use crate::models::{ChatMessage, ChatRole};
use dioxus::prelude::*;

/// Renders a single chat message bubble with role-based styling.
///
/// User messages are right-aligned; assistant messages are left-aligned.
///
/// # Arguments
///
/// * `message` - The chat message to render
#[component]
pub fn ChatBubble(message: ChatMessage) -> Element {
    let bubble_class = match message.role {
        ChatRole::User => "chat-bubble chat-bubble--user",
        ChatRole::Assistant => "chat-bubble chat-bubble--assistant",
        ChatRole::System => "chat-bubble chat-bubble--system",
    };

    let role_label = match message.role {
        ChatRole::User => "You",
        ChatRole::Assistant => "Assistant",
        ChatRole::System => "System",
    };

    rsx! {
        div { class: "{bubble_class}",
            div { class: "chat-bubble-header",
                span { class: "chat-bubble-role", "{role_label}" }
                span { class: "chat-bubble-time", "{message.timestamp}" }
            }
            div { class: "chat-bubble-content", "{message.content}" }
            if !message.attachments.is_empty() {
                div { class: "chat-bubble-attachments",
                    for att in &message.attachments {
                        span { class: "chat-attachment", "{att.name}" }
                    }
                }
            }
        }
    }
}