<template>
    <div class="p-5 border-b border-gray-200 bg-white">
        <div class="flex items-center">
            <div
                class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4"
                :style="{ background: chatStore.currentFriend?.color }"
            >
                {{ chatStore.currentFriend?.name.charAt(0) }}
            </div>
            
            <div>
                <h3 class="text-lg font-semibold text-gray-800">{{ chatStore.currentFriend?.name }}</h3>
                <p class="text-sm flex items-center gap-1">
                    <span
                        class="w-2 h-2 rounded-full"
                        :class="isFriendOnline ? 'bg-green-500' : 'bg-red-500'"
                    ></span>
                    <span :class="isFriendOnline ? 'text-green-600' : 'text-red-600'">
                        {{ isFriendOnline ? '在线' : '离线' }}
                    </span>
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useChatStore } from '@/stores/chat';

const chatStore = useChatStore();
const isFriendOnline = ref(true); // 简化处理，实际应该根据WebSocket状态判断
</script>
