import React from 'react';
import { Pressable, Text, View } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
import { styles } from '../styles';
import { cn } from '../utils/cn';

function TabBtn({ tab, current, onChange }) {
  const active = current === tab.key;
  return (
    <Pressable onPress={() => onChange(tab.key)} className={styles.tabItem}>
      <Ionicons name={active ? tab.iconActive : tab.icon} size={18} color={active ? '#dbeafe' : '#94a3b8'} />
      <Text className={cn(styles.tabLabel, active && styles.tabLabelActive)}>{tab.label}</Text>
    </Pressable>
  );
}

export default function BottomTab({ current, onChange, onAddItem, canAddItem }) {
  const leftTabs = [
    { key: 'trips', label: 'Trips', icon: 'airplane-outline', iconActive: 'airplane' },
    { key: 'items', label: 'Items', icon: 'briefcase-outline', iconActive: 'briefcase' },
  ];

  const rightTabs = [
    { key: 'checkup', label: 'Check-Up', icon: 'checkmark-circle-outline', iconActive: 'checkmark-circle' },
    { key: 'history', label: 'History', icon: 'time-outline', iconActive: 'time' },
  ];

  return (
    <View className={styles.tabBarWrap}>
      <View className={styles.tabBar}>
        <View className={styles.tabGroupSide}>
          {leftTabs.map((tab) => (
            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
          ))}
        </View>

        <Pressable
          className={cn(styles.tabAddBtn, !canAddItem && styles.tabAddBtnDisabled)}
          onPress={onAddItem}
          disabled={!canAddItem}
        >
          <Ionicons name="add" size={26} color="#fff" />
        </Pressable>

        <View className={styles.tabGroupSide}>
          {rightTabs.map((tab) => (
            <TabBtn key={tab.key} tab={tab} current={current} onChange={onChange} />
          ))}
        </View>
      </View>
    </View>
  );
}