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

export default function PriorityPicker({ selected, onSelect }) {
  return (
    <View style={styles.container}>
      {priorities.map(({ key, label, color }) => {
        const isSelected = key === selected;
        return (
          <TouchableOpacity
            key={key}
            onPress={() => onSelect(key)}
            style={[
              styles.pill,
              {
                borderColor: color,
                backgroundColor: isSelected ? color : 'transparent',
              },
            ]}
          >
            <Text
              style={{
                color: isSelected ? '#FFFFFF' : color,
                fontWeight: '600',
                fontSize: 14,
              }}
            >
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

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