fix list selection and other tickets

src/screens/Studio/ChooseInstruments.js

@@ -1,25 +1,16 @@
-import { View, Text, FlatList, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import { BlurView } from "expo-blur";
 import { INSTRUMENTS } from "../../data/data";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const ChooseInstruments = ({ selected = [], setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
-  const onPressSelect = (item) => {
-    if (!setSelected) return;
-    const list = Array.isArray(selected) ? selected : [];
-    const exists = list.includes(item);
-    if (exists) {
-      setSelected(list.filter((v) => v !== item));
-    } else if (list.length < 5) {
-      setSelected([...list, item]);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -32,36 +23,16 @@ const ChooseInstruments = ({ selected = [], setSelected }) => {
         onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
       >
         <ItemContainer height={containerLayout?.height}>
-          <FlatList
-            data={INSTRUMENTS}
-            showsVerticalScrollIndicator={false}
+          <ListSelection
+            options={INSTRUMENTS}
+            variant="simple"
+            selected={selected}
+            setSelected={setSelected}
+            multiple
+            maxSelection={5}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => {
-              const list = Array.isArray(selected) ? selected : [];
-              const selectedItem = list.includes(item);
-
-              return (
-                <CreateLyricsHeader
-                  onPress={() => onPressSelect(item)}
-                  tint={selectedItem ? "default" : "dark"}
-                  colors={[Palette.tran, Palette.tran]}
-                  containerStyle={{
-                    ...styles.itemContainer,
-                    borderWidth: selectedItem ? 2 : 0,
-                    borderColor: selectedItem ? "#F94697" : "transparent",
-                  }}
-                >
-                  <View
-                    style={{
-                      height: 40,
-                      justifyContent: "center",
-                    }}
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </View>
-                </CreateLyricsHeader>
-              );
-            }}
+            itemContainerStyle={styles.itemContainer}
+            itemTextStyle={styles.itemText}
           />
         </ItemContainer>
       </View>