fix list selection and other tickets

src/screens/Studio/CustomizeVoice.js

@@ -1,11 +1,10 @@
-import { View, Text, FlatList, StyleSheet, SectionList } 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, Style } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { BlurView } from "expo-blur";
+import { Palette } from "../../styles";
 import { VOICE } from "../../data/data";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const CustomizeVoice = ({ selected = {}, setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
@@ -33,49 +32,13 @@ const CustomizeVoice = ({ selected = {}, setSelected }) => {
       >
         <ItemContainer height={containerLayout?.height}>
           <View style={{ flex: 1, gap: 10 }}>
-            <SectionList
-              sections={VOICE}
-              showsVerticalScrollIndicator={false}
+            <ListSelection
+              options={VOICE}
+              variant="sectioned"
+              selected={selected}
+              setSelected={setSelected}
               contentContainerStyle={styles.contentContainer}
-              renderItem={({ item, section }) => {
-                const cat = section?.title;
-                const selectedItem = selected?.[cat] === item;
-
-                return (
-                  <CreateLyricsHeader
-                    onPress={() => onPressSelect(cat, item)}
-                    tint={selectedItem ? "default" : "dark"}
-                    // Ne pas changer le blur; garder fond transparent comme ChooseInstruments
-                    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>
-                );
-              }}
-              renderSectionHeader={({ section: { title } }) => (
-                <Text
-                  style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterBold,
-                    left: 10,
-                  }}
-                >
-                  {title}
-                </Text>
-              )}
+              itemContainerStyle={styles.itemContainer}
             />
           </View>
         </ItemContainer>
@@ -109,9 +72,5 @@ const styles = StyleSheet.create({
 
     elevation: 5,
   },
-  itemText: {
-    fontSize: 16,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
+  // itemText was used in legacy implementation; kept here for consistency if needed later
 });