1  /**
 2   * PocketSelector - Tab bar to switch between ALPHA, DX, sAX pockets
 3   */
 4  import React from 'react';
 5  import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 6  import { PocketType, useWalletStore } from '../../store/wallet';
 7  import { colors } from '../../theme/colors';
 8  
 9  interface PocketTab {
10    id: PocketType;
11    label: string;
12    color: string;
13  }
14  
15  const POCKET_TABS: PocketTab[] = [
16    { id: 'alpha', label: 'ALPHA', color: colors.accent.alpha },
17    { id: 'dx', label: 'DX', color: colors.accent.delta },
18    { id: 'sax', label: 'sAX', color: colors.semantic.warning },
19  ];
20  
21  export function PocketSelector() {
22    const { activePocket, setActivePocket } = useWalletStore();
23  
24    return (
25      <View style={styles.container}>
26        {POCKET_TABS.map((tab) => (
27          <TouchableOpacity
28            key={tab.id}
29            style={[
30              styles.tab,
31              activePocket === tab.id && styles.tabActive,
32              activePocket === tab.id && { borderBottomColor: tab.color },
33            ]}
34            onPress={() => setActivePocket(tab.id)}
35          >
36            <View
37              style={[
38                styles.indicator,
39                { backgroundColor: tab.color },
40                activePocket !== tab.id && styles.indicatorInactive,
41              ]}
42            />
43            <Text
44              style={[
45                styles.tabText,
46                activePocket === tab.id && styles.tabTextActive,
47              ]}
48            >
49              {tab.label}
50            </Text>
51          </TouchableOpacity>
52        ))}
53      </View>
54    );
55  }
56  
57  const styles = StyleSheet.create({
58    container: {
59      flexDirection: 'row',
60      backgroundColor: colors.background.secondary,
61      borderRadius: 12,
62      marginHorizontal: 16,
63      marginVertical: 8,
64      padding: 4,
65    },
66    tab: {
67      flex: 1,
68      flexDirection: 'row',
69      alignItems: 'center',
70      justifyContent: 'center',
71      paddingVertical: 12,
72      paddingHorizontal: 8,
73      borderRadius: 8,
74      borderBottomWidth: 2,
75      borderBottomColor: colors.transparent,
76    },
77    tabActive: {
78      backgroundColor: colors.background.tertiary,
79    },
80    indicator: {
81      width: 8,
82      height: 8,
83      borderRadius: 4,
84      marginRight: 8,
85    },
86    indicatorInactive: {
87      opacity: 0.4,
88    },
89    tabText: {
90      color: colors.text.secondary,
91      fontSize: 14,
92      fontWeight: '600',
93    },
94    tabTextActive: {
95      color: colors.white,
96    },
97  });