import { FontAwesome } from "@expo/vector-icons";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function TagChip({ icon, label, onPress }: { icon: any; label: string; onPress: () => void }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.tag}>
        <FontAwesome name={icon} size={16} color="#bbb" style={{ marginRight: 6 }} />
        <Text style={styles.tagLabel}>{label}</Text>
        <FontAwesome name="times-circle" size={16} color="#bbb" style={{ marginLeft: 6 }} />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  tag: { flexDirection: "row", alignItems: "center", backgroundColor: "#333", borderRadius: 999, paddingHorizontal: 10, paddingVertical: 6, marginRight: 8, marginBottom: 8 },
  tagLabel: { color: "white" },
});