import { Text, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { LucideIcon } from '@/components/common/ao/index'
import {
  Avatar,
  AvatarImage,
} from '@/components/ui/avatar'
import { useUserStore } from '@/store/user'
import ListItem from './components/ListItem'

export default function User() {
  const userStore = useUserStore()

  return (
    <SafeAreaView className="flex-1 p-4">
      <View className="flex flex-row items-center">
        <Avatar size="md" className="border-0">
          <AvatarImage
            className="bg-white"
            source={{ uri: userStore.userInfo?.avatar }}
          />
        </Avatar>
        <Text className="text-xl font-semibold ml-3">{userStore.userInfo?.username}</Text>
        <LucideIcon icon="ChevronRight" size={26} className="ml-auto" color="#aaa" strokeWidth={1.5} />
      </View>

      <View className="mt-8 flex flex-col">
        <ListItem icon="Earth" text="共享空间" href="/system/share" />
        <ListItem icon="Settings" text="设置"href="/system/settings" />
      </View>
    </SafeAreaView>
  )
}