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

const filters = [
  { key: 'all', label: 'All' },
  { key: 'active', label: 'Active' },
  { key: 'completed', label: 'Done' },
];

export default function FilterBar() {
  const { state, dispatch } = useTodoState();
  const counts = getTodoCounts(state);

  return (
    <View style={styles.container}>
      {filters.map(({ key, label }) => {
        const isActive = state.filter === key;
        return (
          <TouchableOpacity
            key={key}
            onPress={() => dispatch({ type: 'SET_FILTER', filter: key })}
            style={[
              styles.pill,
              { backgroundColor: isActive ? colors.primary : colors.border },
            ]}
          >
            <Text
              style={[
                styles.label,
                { color: isActive ? colors.onPrimary : colors.textSecondary },
              ]}
            >
              {label} ({counts[key] || 0})
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

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