package com.craigvg.lichun_android.ui.screens.character.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.craigvg.lichun_android.ui.theme.AppColors
import com.craigvg.lichun_android.ui.theme.AppSpacing
import com.craigvg.lichun_android.ui.theme.AppTypography

/**
 * Relationship list section for character profile.
 * Ported from iOS RelationshipSection.swift
 */
@Composable
fun RelationshipSection(
    relationships: List<String>,
    modifier: Modifier = Modifier
) {
    if (relationships.isEmpty()) return

    Column(
        modifier = modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(AppSpacing.xs)
    ) {
        relationships.forEach { relationship ->
            Row(
                modifier = Modifier.padding(vertical = 2.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Box(
                    modifier = Modifier
                        .size(6.dp)
                        .clip(CircleShape)
                        .background(AppColors.primary.copy(alpha = 0.6f))
                )
                Spacer(Modifier.width(AppSpacing.sm))
                Text(relationship, style = AppTypography.body, color = AppColors.primaryText)
            }
        }
    }
}