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

const TABS = [
  { id: 'playlist', label: 'Playlist' },
  { id: 'mood-playlist', label: 'Mood Playlist' },
  { id: 'radio', label: 'Radio' },
  { id: 'collab', label: 'Collab' },
]

export default function CreateScreen() {
  const [activeTab, setActiveTab] = useState(TABS[0].id)

  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">Create</Text>
          <View className="w-10" />
        </View>

        <View className="flex-row gap-2 mb-6">
          {TABS.map((tab) => (
            <TouchableOpacity
              key={tab.id}
              onPress={() => setActiveTab(tab.id)}
              className={`px-4 py-2 rounded-full ${activeTab === tab.id ? 'bg-music-accent' : 'bg-music-card'}`}
            >
              <Text className={`text-sm ${activeTab === tab.id ? 'text-music-black font-medium' : 'text-music-muted'}`}>
                {tab.label}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <View className="p-8 rounded-2xl bg-music-card items-center">
          <Text className="text-4xl mb-3">➕</Text>
          <Text className="text-lg font-semibold text-music-text">{TABS.find(t => t.id === activeTab)?.label}</Text>
        </View>
      </ScrollView>
      <BottomNavBar />
    </View>
  )
}