import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { categories } from '../state';
import { colors } from '../theme';

export default function CategoryPicker({ selected, onSelect }) {
  return (
    <View style={styles.container}>
      {categories.map(cat => {
        const isSelected = cat === selected;
        return (
          <TouchableOpacity
            key={cat}
            onPress={() => onSelect(cat)}
            style={[
              styles.pill,
              {
                backgroundColor: isSelected ? colors.primary : colors.border,
              },
            ]}
          >
            <Text
              style={{
                color: isSelected ? colors.onPrimary : colors.onSurface,
                fontSize: 14,
              }}
            >
              {cat}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginVertical: 8,
  },
  pill: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
  },
});
