import React, { memo } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { colors, radius, spacing, typography } from '../../../theme';

type TabItemProps = {
  icon: string;
  label: string;
  active: boolean;
  onPress: () => void;
};

const TabItem = ({ icon, label, active, onPress }: TabItemProps) => {
  return (
    <TouchableOpacity
      style={[styles.tab, active && styles.tabActive]}
      onPress={onPress}
    >
      <Icon name={icon} size={16} color={active ? colors.primary : colors.textMuted} />
      <Text style={[styles.tabText, active && styles.tabTextActive]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
};

export default memo(TabItem);

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingVertical: spacing.sm,
    borderRadius: radius.md,
  },
  tabActive: {
    backgroundColor: colors.white,
    elevation: 2,
  },
  tabText: {
    marginLeft: spacing.xs,
    color: colors.textMuted,
  },
  tabTextActive: {
    color: colors.primary,
    fontWeight: typography.fontWeight.semibold,
  },
});