/// Terminal component — demonstrates terminal rendering capability.
///
/// In the Tauri+Svelte app, terminals use xterm.js (Canvas addon) via WebView.
/// Dioxus desktop also uses wry/WebView, so xterm.js embedding IS possible
/// via `document::eval()` or an iframe. For this prototype, we render a styled
/// terminal area showing mock output to demonstrate the visual integration.
///
/// A production implementation would:
/// 1. Inject xterm.js via `with_custom_head()` in desktop Config
/// 2. Use `document::eval()` to create/manage Terminal instances
/// 3. Bridge PTY output from PtyManager through DioxusEventSink -> eval()
///
/// The key insight: Dioxus desktop uses the SAME wry/WebKit2GTK backend as
/// Tauri, so xterm.js works identically. No Canvas addon difference.

use dioxus::prelude::*;

use crate::state::{TerminalLine, TerminalLineKind};

#[component]
pub fn TerminalArea(lines: Vec<TerminalLine>) -> Element {
    rsx! {
        div { class: "terminal-area",
            for line in lines.iter() {
                div { class: "terminal-line",
                    match line.kind {
                        TerminalLineKind::Prompt => rsx! {
                            span { class: "terminal-prompt", "{line.text}" }
                        },
                        TerminalLineKind::Output => rsx! {
                            span { class: "terminal-output", "{line.text}" }
                        },
                    }
                }
            }

            // Blinking cursor
            div { class: "terminal-line",
                span { class: "terminal-prompt", "$ " }
                span {
                    style: "color: var(--ctp-text);",
                    "\u{2588}"
                }
            }
        }
    }
}