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

interface BottomTabBarProps {
  activeTab: 'people' | 'topics' | 'companies';
  onTabChange: (tab: 'people' | 'topics' | 'companies') => void;
  showBackButton?: boolean;
  onBack?: () => void;
}

export default function BottomTabBar({ activeTab, onTabChange, showBackButton, onBack }: BottomTabBarProps) {
  const tabs = [
    { id: 'people' as const, label: 'People', icon: 'person-outline' as const },
    { id: 'topics' as const, label: 'Topics', icon: 'newspaper-outline' as const },
    { id: 'companies' as const, label: 'Companies', icon: 'business-outline' as const },
  ];

  return (
    <View style={styles.container}>
      {showBackButton && onBack ? (
        <TouchableOpacity
          style={styles.backTab}
          onPress={onBack}
          activeOpacity={0.7}
        >
          <Ionicons
            name="arrow-back"
            size={24}
            color="#000"
            style={styles.icon}
          />
          <Text style={styles.backLabel}>Back</Text>
        </TouchableOpacity>
      ) : null}
      {tabs.map((tab) => (
        <TouchableOpacity
          key={tab.id}
          style={[
            styles.tab,
            activeTab === tab.id && styles.activeTab,
          ]}
          onPress={() => onTabChange(tab.id)}
          activeOpacity={0.7}
        >
          <Ionicons
            name={tab.icon}
            size={24}
            color={activeTab === tab.id ? '#000' : '#666'}
            style={styles.icon}
          />
          <Text
            style={[
              styles.label,
              activeTab === tab.id && styles.activeLabel,
            ]}
          >
            {tab.label}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    paddingBottom: 8,
    paddingTop: 8,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  activeTab: {
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
  },
  icon: {
    marginBottom: 4,
  },
  label: {
    fontSize: 12,
    color: '#666',
  },
  activeLabel: {
    color: '#000',
    fontWeight: '600',
  },
  backTab: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    marginHorizontal: 4,
  },
  backLabel: {
    fontSize: 12,
    color: '#000',
    fontWeight: '600',
  },
});