fix empty project creation and use credit to generate

src/screens/Writing/WritingLyrics.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
-import { background, icons } from "../../assets";
-import BorderGradientButton from "../../components/BorderGradientButton";
+import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { strings } from "../../constants/strings";
@@ -14,16 +13,22 @@ import { useUserData } from "../../providers/UserDataProvider";
 import { Palette, gutters } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 
+const CTA_BUTTON_HEIGHT = 58;
+const CTA_BUTTON_MAX_WIDTH = 520;
+
 const WritingLyrics = () => {
-  const { createNewProject, selectedProject, updateProjectData } =
-    useUserData();
+  const {
+    createNewProject,
+    selectedProjectId,
+    updateProjectData,
+  } = useUserData();
   const { setIsLoading } = useMinuit();
 
   const startWriting = React.useCallback(async () => {
     try {
       await setIsLoading(true);
-      if (selectedProject) {
-        updateProjectData({ hasLyrics: false });
+      if (selectedProjectId) {
+        await updateProjectData({ hasLyrics: false });
         setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
         return;
       }
@@ -40,7 +45,7 @@ const WritingLyrics = () => {
   }, [
     createNewProject,
     navigate,
-    selectedProject,
+    selectedProjectId,
     setIsLoading,
     updateProjectData,
   ]);
@@ -51,11 +56,7 @@ const WritingLyrics = () => {
       headerType="NONE"
     >
       {/* <Image source={ai.nathalie} style={styles.img} resizeMode="contain" /> */}
-      <MusicLandHeader
-        onPressBack={goBack}
-        progress={9}
-        logo={icons.musicLandWriting}
-      />
+      <MusicLandHeader onPressBack={goBack} />
       <View style={styles.contentWrapper}>
         <View style={styles.heroContainer}>
           {/* <Text style={styles.heroTitle}>
@@ -68,18 +69,12 @@ const WritingLyrics = () => {
         <View style={styles.ctaGroup}>
           <GradientButton
             size="large"
-            maxWidth={520}
-            containerStyle={{ alignSelf: "center", width: "100%" }}
+            height={CTA_BUTTON_HEIGHT}
+            maxWidth={CTA_BUTTON_MAX_WIDTH}
+            containerStyle={styles.ctaButton}
             title={strings.writing.onboarding.primaryCta}
             onPress={startWriting}
-            textStyle={{ fontFamily: FONT_FAMILY.InterSemiBold }}
-          />
-          <BorderGradientButton
-            size="small"
-            title={strings.writing.onboarding.secondaryCta}
-            disabled
-            containerStyle={{ alignSelf: "center", width: "100%" }}
-            maxWidth={360}
+            textStyle={styles.ctaButtonText}
           />
           <Text style={styles.secondaryNote}>
             {strings.writing.onboarding.secondaryNote}
@@ -127,6 +122,14 @@ const styles = StyleSheet.create({
   ctaGroup: {
     gap: 12,
   },
+  ctaButton: {
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: CTA_BUTTON_MAX_WIDTH,
+  },
+  ctaButtonText: {
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
   secondaryNote: {
     textAlign: "center",
     color: Palette.white,