gtd/app/src/components/PriorityChips.tsx

import { Pressable, StyleSheet, Text, View } from "react-native";
import { haptic } from "../lib/haptics";
import { PRIORITIES, PRIORITY_COLOR, PRIORITY_LABEL } from "../lib/priority";
import { C } from "../lib/theme";
import type { Task } from "../lib/types";

export default function PriorityChips({
  value,
  onChange,
}: {
  value: Task["priority"];
  onChange: (p: Task["priority"]) => void;
}) {
  return (
    <View style={{ marginBottom: 14 }}>
      <Text style={s.label}>Priority</Text>
      <View style={s.rowWrap}>
        {PRIORITIES.map((p) => {
          const active = value === p;
          const color = PRIORITY_COLOR[p];
          return (
            <Pressable
              key={p}
              style={[s.chip, active && { borderColor: color, backgroundColor: `${color}22` }]}
              onPress={() => {
                haptic.select();
                onChange(p);
              }}
            >
              <View style={[s.flag, { backgroundColor: color }]} />
              <Text style={[s.text, active && { color: C.text }]}>{PRIORITY_LABEL[p]}</Text>
            </Pressable>
          );
        })}
      </View>
    </View>
  );
}

const s = StyleSheet.create({
  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
  rowWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
  chip: {
    flexDirection: "row",
    alignItems: "center",
    gap: 7,
    paddingVertical: 8,
    paddingHorizontal: 13,
    borderRadius: 20,
    backgroundColor: C.surface,
    borderWidth: 1,
    borderColor: C.border,
  },
  flag: { width: 10, height: 10, borderRadius: 5 },
  text: { color: C.muted, fontSize: 14 },
});