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

const CHANNELS = [
  { id: '1', name: 'Lofi Girl - beats to relax/study to' },
  { id: '2', name: 'Chillhop Radio' },
  { id: '3', name: 'Lofi Hip Hop' },
]

export default function LofiScreen() {
  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">
          <TouchableOpacity onPress={() => router.push('/account' as any)} className="w-10 h-10 rounded-full bg-music-card items-center justify-center">
            <Text className="text-music-muted">👤</Text>
          </TouchableOpacity>
          <Text className="text-xl font-semibold text-music-text">LoFi Channel</Text>
          <View className="w-10" />
        </View>
        {CHANNELS.map((ch) => (
          <TouchableOpacity key={ch.id} className="mb-4 rounded-2xl bg-music-card overflow-hidden" style={{ aspectRatio: 16 / 9 }}>
            <View className="flex-1 justify-center items-center bg-music-vinyl">
              <Text className="text-5xl">🎵</Text>
            </View>
            <View className="p-4 bg-black/80 absolute bottom-0 left-0 right-0">
              <Text className="text-xs text-music-accent">LoFi</Text>
              <Text className="text-sm font-medium text-music-text">{ch.name}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
      <BottomNavBar />
    </View>
  )
}