Fix this code.
// App.js (Updated)

import React from 'react';
import { StyleSheet, Text, View, ScrollView, Alert } from 'react-native';
import usePermissions from './hooks/usePermissions';
import PhotoCapture from './components/PhotoCapture';
import VideoRecording from './components/VideoRecording';
import VoiceRecording from './components/VoiceRecording';
import PDFGenerator from './components/PDFGenerator';
import LegalText from './components/LegalText'; // Import LegalText component
import { MediaProvider } from './context/MediaContext';

const App = () => {
  const { hasCameraPermission, hasAudioPermission } = usePermissions();

  if (hasCameraPermission === null || hasAudioPermission === null) {
    return <View style={styles.loadingContainer} />;
  }

  if (!hasCameraPermission || !hasAudioPermission) {
    return (
      <View style={styles.permissionContainer}>
        <Text style={styles.permissionText}>
          No access to camera or microphone. Please enable permissions in your device settings.
        </Text>
      </View>
    );
  }

  return (
    <MediaProvider>
      <ScrollView contentContainerStyle={styles.container}>
        {/* --- Legal Text Display --- */}
        <Text style={styles.header}>Consent Form</Text>
        <LegalText /> 

        {/* --- Photo Capture Section --- */}
        <PhotoCapture />

        {/* --- Video Recording Section --- */}
        {/* <VideoRecording /> */}

        {/* --- Voice Recording Section --- */}
        <VoiceRecording />

        {/* --- PDF Generation Section --- */}
        <PDFGenerator />
      </ScrollView>
    </MediaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingBottom: 40,
    backgroundColor: '#f5f5f5',
  },
  loadingContainer: {
    flex: 1,
  },
  permissionContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  permissionText: {
    fontSize: 16,
    textAlign: 'center',
    marginHorizontal: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

export default App;

// hooks/usePermissions.js

import { useState, useEffect } from 'react';
import { Alert, Platform } from 'react-native';
import { Camera } from 'expo-camera';
import { Audio } from 'expo-av';
import * as Permissions from 'expo-permissions'; // Import Permissions

const usePermissions = () => {
  const [hasCameraPermission, setHasCameraPermission] = useState(null);
  const [hasAudioPermission, setHasAudioPermission] = useState(null);
  const [hasStoragePermission, setHasStoragePermission] = useState(null);

  useEffect(() => {
    (async () => {
      // Request Camera Permission
      const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
      setHasCameraPermission(cameraStatus === 'granted');

      // Request Audio Permission
      const { status: audioStatus } = await Audio.requestPermissionsAsync();
      setHasAudioPermission(audioStatus === 'granted');

      // Request Storage Permissions for Android
      if (Platform.OS === 'android') {
        const { status: storageStatus } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY_WRITE_ONLY);
        setHasStoragePermission(storageStatus === 'granted');
      } else {
        // For iOS, storage permissions are handled via Info.plist
        setHasStoragePermission(true);
      }

      // Alert if any permission is not granted
      if (
        cameraStatus !== 'granted' ||
        audioStatus !== 'granted' ||
        (Platform.OS === 'android' && storageStatus !== 'granted')
      ) {
        Alert.alert(
          'Permissions Required',
          'Please grant camera, microphone, and storage permissions to use this app.',
          [{ text: 'OK' }]
        );
      }
    })();
  }, []);

  return { hasCameraPermission, hasAudioPermission, hasStoragePermission };
};

export default usePermissions;