import React from "react";
import { Pressable, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { Text } from "./text";
/**
 * Compact chip used to display a tag — icon + name with a soft accent
 * border. When `selected` is true the border + background pick up the
 * accent at full opacity / 18% fill respectively.
 */
export function TagChip({ name, color, selected, onPress, size = "sm" }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const accent = color ?? (isDark ? "rgb(163, 163, 163)" : "rgb(115, 115, 115)");
    const dims = size === "sm"
        ? { paddingH: 8, paddingV: 3, fontSize: 11, iconSize: 10 }
        : { paddingH: 10, paddingV: 5, fontSize: 12, iconSize: 12 };
    const inner = (<View style={{
            flexDirection: "row",
            alignItems: "center",
            gap: 4,
            paddingHorizontal: dims.paddingH,
            paddingVertical: dims.paddingV,
            borderRadius: 6,
            borderWidth: 1,
            borderColor: selected ? accent : withAlpha(accent, 0.33),
            backgroundColor: selected ? withAlpha(accent, 0.18) : "transparent",
        }}>
      <Ionicons name="pricetag-outline" size={dims.iconSize} color={accent}/>
      <Text className="text-foreground" style={{ fontSize: dims.fontSize }}>
        {name}
      </Text>
    </View>);
    if (!onPress) {
        return inner;
    }
    return (<Pressable onPress={onPress} hitSlop={4} style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}>
      {inner}
    </Pressable>);
}
/** Tints an `rgb(...)` or `#rrggbb` color with the given alpha 0..1. */
export function withAlpha(color, alpha) {
    const rgb = color.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
    if (rgb) {
        return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
    }
    const hex = color.match(/^#([0-9a-f]{6})$/i);
    if (hex) {
        const h = hex[1] ?? "";
        return `rgba(${parseInt(h.slice(0, 2), 16)}, ${parseInt(h.slice(2, 4), 16)}, ${parseInt(h.slice(4, 6), 16)}, ${alpha})`;
    }
    return color;
}
//# sourceMappingURL=tag-chip.jsx.map