import { Pressable, StyleSheet, Text, View } from "react-native";

import { fonts, radii } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";

type FilterChipProps = {
  label: string;
  active?: boolean;
  onPress: () => void;
};

export function FilterChip({ label, active, onPress }: FilterChipProps) {
  const { colors } = useAppTheme();

  return (
    <Pressable
      accessibilityRole="button"
      onPress={onPress}
      style={[
        styles.chip,
        { borderColor: colors.borderGlass, backgroundColor: colors.cardGlass },
        active && { backgroundColor: colors.primary, borderColor: colors.primary },
      ]}
    >
      <View style={styles.chipInner}>
        <Text
          style={[
            styles.label,
            { color: colors.mutedForeground },
            active && { color: colors.primaryForeground },
          ]}
        >
          {label}
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  chip: {
    height: 32,
    borderWidth: 1,
    borderRadius: radii.pill,
    overflow: "hidden",
  },
  chipInner: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 14,
  },
  label: {
    fontSize: 13,
    fontFamily: fonts.bodyMedium,
  },
});