Refactor MoonPhase component to handle edge case of phase being 0

Author: codeAbinash

src/screens/Weather/Main/components/MoonPhase.tsx

@@ -18,14 +18,15 @@ type MoonRiseSetProps = {
 
 export default function MoonPhase({ moonrise, moonset, phase, theme }: MoonRiseSetProps) {
   const timeFormat = weatherStore((state) => state.weatherTimeFormat)
+  const phaseNumber = phase === 0 ? 0 : phase || '__'
 
   return (
     <View className='rounded-3xl bg-black/10' style={boxFullSize}>
       <WeatherLabel Icon={Moon02SolidIcon} color={theme.color} label={'Moon Phase'} />
       <View className='flex-1 justify-between px-5 pb-4 pt-0'>
         <View className='flex-row justify-between'>
           <View className='flex-1'>
-            <Medium style={[{ fontSize: 35 }, theme.color]}>{phase || '__'}</Medium>
+            <Medium style={[{ fontSize: 35 }, theme.color]}>{phaseNumber}</Medium>
             <Regular style={[theme.color, F.F12]}>{moonPhaseString(phase || 1)}</Regular>
             {/* <View> */}
             <Regular style={[theme.color, F.F12]}>