import { memo } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';

type Category = {
  id: string;
  label: string;
};

type CategoryTabsProps = {
  categories: Category[];
  activeId: string;
  onChange: (id: string) => void;
};

export function CategoryTabs({ categories, activeId, onChange }: CategoryTabsProps) {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.container}
    >
      {categories.map(category => (
        <CategoryTabItem
          key={category.id}
          category={category}
          isActive={category.id === activeId}
          onPress={onChange}
        />
      ))}
    </ScrollView>
  );
}

type CategoryTabItemProps = {
  category: Category;
  isActive: boolean;
  onPress: (id: string) => void;
};

const CategoryTabItem = memo(({ category, isActive, onPress }: CategoryTabItemProps) => {
  return (
    <Pressable onPress={() => onPress(category.id)} style={styles.tabButton}>
      <Text style={[styles.label, isActive && styles.labelActive]}>{category.label}</Text>
      <View style={[styles.indicator, isActive && styles.indicatorActive]} />
    </Pressable>
  );
});
CategoryTabItem.displayName = 'CategoryTabItem';

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
    paddingHorizontal: 6,
  },
  tabButton: {
    alignItems: 'center',
    marginRight: 20,
    paddingBottom: 10,
  },
  label: {
    color: '#7F8794',
    fontSize: 15,
    fontWeight: '600',
    letterSpacing: 0.3,
  },
  labelActive: {
    color: '#C7FF00',
  },
  indicator: {
    alignSelf: 'stretch',
    height: 3,
    marginTop: 8,
    backgroundColor: 'transparent',
    borderRadius: 999,
  },
  indicatorActive: {
    backgroundColor: '#C7FF00',
  },
});