// src/main/kotlin/ui/RealTimeTradeList.kt
package ui

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import model.RealTimeTrade

@Composable
fun RealTimeTradeList(tradeLogs: List<RealTimeTrade>) {
    Column(modifier = Modifier.fillMaxSize()) {
        // [1] 리스트 헤더 영역
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color(0xFFEEEEEE)) // 연한 회색 배경
                .padding(vertical = 4.dp)
        ) {
            Text("시간", modifier = Modifier.weight(1f), textAlign = TextAlign.Center, fontSize = 11.sp, color = Color.Gray)
            Text("체결가", modifier = Modifier.weight(1.5f), textAlign = TextAlign.Center, fontSize = 11.sp, color = Color.Gray)
            Text("대비", modifier = Modifier.weight(1f), textAlign = TextAlign.Center, fontSize = 11.sp, color = Color.Gray)
            Text("체결량", modifier = Modifier.weight(1f), textAlign = TextAlign.Center, fontSize = 11.sp, color = Color.Gray)
        }

        // [2] 실제 데이터 리스트
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            // 최신 데이터가 위로 오도록 표시 (이미 tradeLogs에 add(0, new)로 들어옴)
            items(tradeLogs) { trade ->
                TradeLogRow(trade) // 기존에 만드신 행(Row) 컴포넌트 재사용
                Divider(color = Color(0xFFF5F5F5), thickness = 0.5.dp)
            }
        }
    }
}