import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

type TabType = 'search' | 'favorites' | 'settings';

interface BottomTabBarProps {
  activeTab: TabType;
  onTabChange: (tab: TabType) => void;
}

export default function BottomTabBar({ activeTab, onTabChange }: BottomTabBarProps) {
  return (
    <View style={styles.tabBar}>
      <TouchableOpacity onPress={() => onTabChange('search')} style={styles.tabItem}>
        <FontAwesome name="search" size={24} color={activeTab === 'search' ? '#007AFF' : '#666'} />
        <Text style={activeTab === 'search' ? styles.activeText : styles.inactiveText}>노래검색</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onTabChange('favorites')} style={styles.tabItem}>
        <FontAwesome name="star" size={24} color={activeTab === 'favorites' ? '#007AFF' : '#666'} />
        <Text style={activeTab === 'favorites' ? styles.activeText : styles.inactiveText}>즐겨찾기</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onTabChange('settings')} style={styles.tabItem}>
        <FontAwesome name="user" size={24} color={activeTab === 'settings' ? '#007AFF' : '#666'} />
        <Text style={activeTab === 'settings' ? styles.activeText : styles.inactiveText}>마이페이지</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  tabBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    paddingBottom: 0,
    backgroundColor: '#fff',
    borderTopWidth: 0,
  },
  tabItem: {
    alignItems: 'center',
  },
  activeText: {
    fontSize: 12,
    color: '#007AFF',
    marginTop: 4,
  },
  inactiveText: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
  },
});