import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { useRouter } from 'expo-router'

const MENU_ITEMS = [
  { icon: '🔌', label: 'Plugins' },
  { icon: '🖥️', label: 'Servers' },
  { icon: '👤', label: 'About You' },
  { icon: '📻', label: 'Internet Radio' },
  { icon: '🔄', label: 'Updates' },
  { icon: '⚙️', label: 'Settings & Privacy' },
]

export default function AccountScreen() {
  const router = useRouter()

  return (
    <View className="flex-1 bg-music-black">
      <ScrollView className="flex-1 px-4 pt-4">
        <View className="flex-row items-center gap-4 mb-8">
          <View className="w-16 h-16 rounded-full bg-music-card items-center justify-center">
            <Text className="text-3xl">👤</Text>
          </View>
          <Text className="text-2xl font-semibold text-music-text">Welcome, User</Text>
        </View>

        {MENU_ITEMS.map((item) => (
          <TouchableOpacity key={item.label} className="flex-row items-center gap-4 py-4">
            <Text className="text-xl">{item.icon}</Text>
            <Text className="text-music-text font-medium">{item.label}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  )
}