continue flow integartion

src/screens/Writing/CustomizeSongStructure.js

@@ -1,16 +1,33 @@
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
-import DragDropTest from "../../components/DragDropTest";
+import SongStructureDragDrop from "../../components/SongStructureDragDrop";
 
-const CustomizeSongStructure = () => {
+// baseStructure: array like ['couplet','refrain',...]
+// onChange: callback that receives array like ['couplet','refrain',...]
+const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
+  const sourceItems = useMemo(() => {
+    // create unique ids for duplicates
+    const counters = { couplet: 0, refrain: 0 };
+    return (baseStructure || []).map((type) => {
+      const key = (type || '').toLowerCase();
+      counters[key] = (counters[key] || 0) + 1;
+      const idx = counters[key];
+      return {
+        id: `${key}-${idx}`,
+        label: `${type} ${idx}`,
+        value: key,
+      };
+    });
+  }, [baseStructure]);
+
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
       <CreateLyricsHeader
@@ -59,7 +76,10 @@ const CustomizeSongStructure = () => {
         </View>
       </View> */}
       <View style={{ flex: 1 }}>
-        <DragDropTest />
+        <SongStructureDragDrop
+          sourceItems={sourceItems}
+          onChange={(arr) => onChange?.(arr)}
+        />
       </View>
     </View>
   );