import React from "react";
import { Pressable, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { Text } from "./text";
/**
 * Sticky tab strip used in the extension popup and small-window
 * surfaces. Hidden items collapse the strip naturally; supply the
 * `iconOutline` variant for the inactive state when an icon needs a
 * different glyph.
 */
export function BottomNav({ items, active, onChange, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const borderColor = isDark ? "rgb(38, 38, 38)" : "rgb(229, 229, 229)";
    const backgroundColor = isDark ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
    return (<View style={{
            flexDirection: "row",
            borderTopWidth: 1,
            borderTopColor: borderColor,
            backgroundColor,
        }}>
      {items
            .filter((t) => t.visible !== false)
            .map((t) => (<NavTab key={t.id} label={t.label} iconName={t.id === active ? t.icon : (t.iconOutline ?? t.icon)} active={t.id === active} onPress={() => onChange(t.id)}/>))}
    </View>);
}
function NavTab({ label, iconName, active, onPress }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const tint = active
        ? isDark
            ? "rgb(255, 255, 255)"
            : "rgb(0, 0, 0)"
        : isDark
            ? "rgb(163, 163, 163)"
            : "rgb(115, 115, 115)";
    const pressedBg = isDark ? "rgb(38, 38, 38)" : "rgb(245, 245, 245)";
    return (<Pressable onPress={onPress} style={({ pressed }) => ({
            flex: 1,
            paddingVertical: 8,
            alignItems: "center",
            justifyContent: "center",
            gap: 2,
            backgroundColor: pressed ? pressedBg : "transparent",
        })}>
      <Ionicons name={iconName} size={18} color={tint}/>
      <Text style={{ color: tint, fontSize: 10, fontWeight: active ? "600" : "400" }}>{label}</Text>
    </Pressable>);
}
//# sourceMappingURL=bottom-nav.jsx.map