fix list selection and other tickets

src/screens/Writing/SongStyle.js

@@ -1,12 +1,12 @@
-import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import { BlurView } from "expo-blur";
-import { GOALS, SONG_STYLE } from "../../data/data";
-import { Palette, Style } from "../../styles";
+import { SONG_STYLE } from "../../data/data";
+import { Palette } from "../../styles";
 import CustomInput from "./components/CustomInput";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const SongStyle = ({
   selected: selectedProp,
@@ -18,13 +18,7 @@ const SongStyle = ({
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
-  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 16, marginTop: 16 }}>
@@ -34,41 +28,13 @@ const SongStyle = ({
           subTitle="Choisis l'ambiance émotions que tu veux faire passer."
         />
         <ItemContainer>
-          <FlatList
-            data={SONG_STYLE}
-            showsVerticalScrollIndicator={false}
+          <ListSelection
+            options={SONG_STYLE}
+            variant="titleDescription"
+            selected={selected}
+            setSelected={setSelected}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => {
-              const selectedItem = selected === item.title;
-
-              return (
-                <CreateLyricsHeader
-                  colors={[Palette.tran, Palette.tran]}
-                  tint={selectedItem ? "default" : "dark"}
-                  onPress={() => onPressSelect(item.title)}
-                  containerStyle={{
-                    ...styles.itemContainer,
-                    borderWidth: selectedItem ? 2 : 0,
-                    borderColor: selectedItem ? "#F94697" : "transparent",
-                  }}
-                >
-                  <View style={{ paddingVertical: 6 }}>
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                        {item.title}
-                      </Text>{" "}
-                      : {item.description}
-                    </Text>
-                  </View>
-                </CreateLyricsHeader>
-              );
-            }}
+            itemContainerStyle={styles.itemContainer}
           />
         </ItemContainer>
       </View>