Fix the screen make it flow better and make sense for a fitness workout app.
make it look better

import React, { useState, useContext } from 'react';
import { View, StyleSheet, ScrollView, Alert } from 'react-native';
import { Text, Button, ProgressBar, Card, Chip, useTheme } from 'react-native-paper';
import { AuthContext } from '../../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNPickerSelect from 'react-native-picker-select';

const STEPS = {
  FITNESS_GOALS: 0,
  SCHEDULE: 1,
  EXERCISES: 2,
  REST_RECOVERY: 3,
  REVIEW: 4,
};

const RoutineCreationScreen = ({ navigation }) => {
  const theme = useTheme();
  const { user } = useContext(AuthContext);
  const [currentStep, setCurrentStep] = useState(STEPS.FITNESS_GOALS);
  const [routineData, setRoutineData] = useState({
    goal: '',
    customGoal: '',
    schedule: {
      frequency: '',
      duration: '',
      preferredDays: [],
      timeOfDay: '',
      intensity: '',
    },
    exercises: [],
    rest: {
      restDays: [],
      cooldownRoutine: [],
      restBetweenSets: '30',
    },
    routineName: '',
  });

  const fitnessGoals = [
    { label: 'Build Muscle', value: 'muscle', icon: 'dumbbell' },
    { label: 'Lose Weight', value: 'weight', icon: 'scale' },
    { label: 'Increase Flexibility', value: 'flexibility', icon: 'yoga' },
    { label: 'Improve Endurance', value: 'endurance', icon: 'run' },
    { label: 'Toning', value: 'toning', icon: 'human' },
    { label: 'General Fitness', value: 'general', icon: 'heart-pulse' },
  ];

  const renderStepContent = () => {
    switch (currentStep) {
      case STEPS.FITNESS_GOALS:
        return (
          <View>
            <Text style={styles.stepTitle}>Select Your Fitness Goals</Text>
            <View style={styles.goalsContainer}>
              {fitnessGoals.map((goal) => (
                <Chip
                  key={goal.value}
                  onPress={() => updateRoutineData('goal', goal.value)}
                  selected={routineData.goal === goal.value}
                  style={styles.goalChip}
                  icon={() => <Icon name={goal.icon} size={24} color={theme.colors.primary} />}
                >
                  {goal.label}
                </Chip>
              ))}
            </View>
            {routineData.goal === 'custom' && (
              <TextInput
                label="Custom Goal"
                value={routineData.customGoal}
                onChangeText={(text) => updateRoutineData('customGoal', text)}
                style={styles.input}
              />
            )}
          </View>
        );

      case STEPS.SCHEDULE:
        return (
          <View>
            <Text style={styles.stepTitle}>Choose Your Workout Schedule</Text>
            <RNPickerSelect
              onValueChange={(value) => updateSchedule('frequency', value)}
              items={[
                { label: '1 day per week', value: '1' },
                { label: '2 days per week', value: '2' },
                { label: '3 days per week', value: '3' },
                { label: '4 days per week', value: '4' },
                { label: '5 days per week', value: '5' },
                { label: '6 days per week', value: '6' },
                { label: '7 days per week', value: '7' },
              ]}
              placeholder={{ label: 'Select workout frequency', value: null }}
              value={routineData.schedule.frequency}
              style={pickerSelectStyles}
            />
            
            <Text style={styles.inputLabel}>Workout Duration</Text>
            <RNPickerSelect
              onValueChange={(value) => updateSchedule('duration', value)}
              items={[
                { label: '30 minutes', value: '30' },
                { label: '45 minutes', value: '45' },
                { label: '60 minutes', value: '60' },
                { label: '90 minutes', value: '90' },
              ]}
              placeholder={{ label: 'Select workout duration', value: null }}
              value={routineData.schedule.duration}
              style={pickerSelectStyles}
            />

            <Text style={styles.inputLabel}>Preferred Days</Text>
            <View style={styles.daysContainer}>
              {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
                <Chip
                  key={day}
                  onPress={() => togglePreferredDay(day)}
                  selected={routineData.schedule.preferredDays.includes(day)}
                  style={styles.dayChip}
                >
                  {day}
                </Chip>
              ))}
            </View>
          </View>
        );

      // Add cases for EXERCISES, REST_RECOVERY, and REVIEW steps
      
      default:
        return null;
    }
  };

  const updateRoutineData = (field, value) => {
    setRoutineData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const updateSchedule = (field, value) => {
    setRoutineData((prev) => ({
      ...prev,
      schedule: {
        ...prev.schedule,
        [field]: value,
      },
    }));
  };

  const togglePreferredDay = (day) => {
    setRoutineData((prev) => {
      const currentDays = prev.schedule.preferredDays;
      const updatedDays = currentDays.includes(day)
        ? currentDays.filter((d) => d !== day)
        : [...currentDays, day];
      
      return {
        ...prev,
        schedule: {
          ...prev.schedule,
          preferredDays: updatedDays,
        },
      };
    });
  };

  const handleNext = () => {
    if (currentStep < STEPS.REVIEW) {
      setCurrentStep(currentStep + 1);
    } else {
      // Handle routine creation
      Alert.alert('Success', 'Routine created successfully!');
      navigation.goBack();
    }
  };

  const handleBack = () => {
    if (currentStep > STEPS.FITNESS_GOALS) {
      setCurrentStep(currentStep - 1);
    } else {
      navigation.goBack();
    }
  };

  return (
    <ScrollView style={styles.container}>
      <ProgressBar
        progress={(currentStep + 1) / (Object.keys(STEPS).length)}
        color={theme.colors.primary}
        style={styles.progressBar}
      />
      
      {renderStepContent()}

      <View style={styles.buttonContainer}>
        <Button mode="outlined" onPress={handleBack}>
          {currentStep === STEPS.FITNESS_GOALS ? 'Cancel' : 'Back'}
        </Button>
        <Button mode="contained" onPress={handleNext}>
          {currentStep === STEPS.REVIEW ? 'Create Routine' : 'Next'}
        </Button>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  progressBar: {
    marginBottom: 16,
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  goalsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  goalChip: {
    margin: 4,
    width: '48%',
  },
  inputLabel: {
    fontSize: 16,
    marginTop: 16,
    marginBottom: 8,
  },
  daysContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  dayChip: {
    margin: 4,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 24,
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30,
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'gray',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30,
  },
});

export default RoutineCreationScreen;