import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { useRouter } from 'expo-router'
import { BottomNavBar } from '../src/components/BottomNavBar'

export default function ReleasesScreen() {
  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 justify-between mb-6">
          <View className="w-10" />
          <Text className="text-xl font-semibold text-music-text">New Releases</Text>
          <View className="w-10" />
        </View>
        {[1, 2, 3].map((i) => (
          <View key={i} className="flex-row gap-4 p-4 rounded-2xl bg-music-card mb-4">
            <View className="items-center">
              <View className="w-16 h-16 rounded-lg bg-music-dark mb-2" />
              <Text className="text-xs text-music-muted">Artist {i}</Text>
              <TouchableOpacity className="flex-row items-center px-3 py-1 rounded-full bg-music-dark mt-2">
                <Text className="text-xs text-music-text">➕ Add</Text>
              </TouchableOpacity>
            </View>
            <View className="flex-wrap flex-row gap-2 flex-1">
              {[...Array(6)].map((_, j) => (
                <View key={j} className="w-[15%] aspect-square rounded-lg bg-music-dark" />
              ))}
            </View>
          </View>
        ))}
      </ScrollView>
      <BottomNavBar />
    </View>
  )
}