<script setup>
import { userApi } from '@/api/userApi';
import { onMounted, ref } from 'vue';
import {
    BsBox2Fill,
    BsGearFill,
    BsPersonFill,
    BsPinMapFill
} from 'vue-icons-plus/bs';

const userInfo = ref({});

onMounted(async () => {
    try {
        const { data } = await userApi.profile();
        userInfo.value = data;
        console.log('User profile:', userInfo.value);
    } catch (error) {
        console.error('Failed to fetch user profile:', error);
    }
});

const menuGroups = [
    {
        title: '账号与信息',
        items: [
            { label: '个人资料', icon: BsPersonFill, link: '/profile/edit' },
        ]
    },
    {
        title: '订单与服务',
        items: [
            { label: '我的订单', icon: BsBox2Fill, link: '/orders' },
            { label: '我的地址', icon: BsPinMapFill, link: '/address' },
        ]
    },
    {
        title: '设置',
        items: [
            { label: '系统设置', icon: BsGearFill, link: '/settings' },
        ]
    }
];
</script>

<template>

    <div class="bg-white p-4 shadow-lg border-b border-gray-300">
        <div class="flex items-center gap-4 p-4 border-gray-100">
            <div class="w-16 h-16 border rounded-full border-gray-200 bg-gray-200 overflow-hidden">
                <img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
            </div>

            <div>
                <h3 class="text-xl font-medium">{{ userInfo.username }}</h3>
                <span class="text-gray-500">ID: {{ userInfo.id }}</span>
            </div>
        </div>
    </div>

    <div class="menus space-y-4 mt-4 px-4">
        <div v-for="(group, groupIndex) in menuGroups" :key="groupIndex" class="bg-white rounded-lg overflow-hidden">
            <div class="px-4 py-2 text-sm text-gray-500">{{ group.title }}</div>
            <div class="divide-y divide-gray-100">
                <div v-for="(item, itemIndex) in group.items" :key="itemIndex"
                    class="flex items-center px-4 py-3 hover:bg-gray-50 active:bg-gray-100 cursor-pointer">
                    <component :is="item.icon" class="mr-3 text-xl text-gray-600" />
                    <span class="flex-1">{{ item.label }}</span>
                    <span class="text-gray-400">›</span>
                </div>
            </div>
        </div>
    </div>

</template>
