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

const NAV_ITEMS = [
  { id: 'index', label: 'Home', icon: '🏠', route: '/' },
  { id: 'playlist', label: 'Playlist', icon: '📀', route: '/playlist' },
  { id: 'search', label: 'Search', icon: '🔍', route: '/search' },
  { id: 'radio', label: 'Radio', icon: '📻', route: '/radio' },
  { id: 'create', label: 'Create', icon: '➕', route: '/create' },
]

export function BottomNavBar() {
  const router = useRouter()
  const pathname = usePathname()

  return (
    <View className="flex-row bg-music-dark border-t border-music-border pb-2">
      {NAV_ITEMS.map((item) => {
        const isActive = pathname === item.route || (item.route !== '/' && pathname.startsWith(item.route))
        return (
          <TouchableOpacity
            key={item.id}
            onPress={() => router.push(item.route as any)}
            className="flex-1 items-center py-2"
          >
            <Text className="text-xl">{item.icon}</Text>
            <Text className={`text-xs mt-0.5 ${isActive ? 'text-music-accent' : 'text-music-muted'}`}>
              {item.label}
            </Text>
          </TouchableOpacity>
        )
      })}
    </View>
  )
}