Untitled

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image, ScrollView } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const topics = [
  { id: '1', title: 'Alphabets' },
  { id: '2', title: 'Greetings' },
  { id: '3', title: 'Family' },
  { id: '4', title: 'Food' },
  { id: '5', title: 'Animals' }
];

export default function PracticeScreen() {
  const navigation = useNavigation();

  const handleStart = (mode, topic) => {
    navigation.navigate(mode, { topic });
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.header}>Practice Page</Text>

      <View style={styles.iconRow}>
        <View style={styles.iconContainer}>
          <Image source={require('../assets/quiz.png')} style={styles.iconImage} />
          <Text style={styles.iconText}>Quiz</Text>
        </View>

        <View style={styles.iconContainer}>
          <Image source={require('../assets/flashcards.png')} style={styles.iconImage} />
          <Text style={styles.iconText}>Flashcards</Text>
        </View>
      </View>

      {topics.map(topic => (
        <View key={topic.id} style={styles.topicSection}>
          <Text style={styles.topicTitle}>{topic.title}</Text>

          <TouchableOpacity style={styles.button} onPress={() => handleStart('QuizScreen', topic.title)}>
            <Text style={styles.buttonText}>Start Quiz</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.button} onPress={() => handleStart('FlashcardScreen', topic.title)}>
            <Text style={styles.buttonText}>Start Flashcard</Text>
          </TouchableOpacity>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  header: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center'
  },
  iconRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 30
  },
  iconContainer: {
    alignItems: 'center'
  },
  iconImage: {
    width: 80,
    height: 80,
    marginBottom: 10
  },
  iconText: {
    fontSize: 18,
    fontWeight: '500'
  },
  topicSection: {
    marginBottom: 30,
    alignItems: 'center'
  },
  topicTitle: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10
  },
  button: {
    backgroundColor: '#222',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 12,
    marginVertical: 5
  },
  buttonText: {
    color: '#fff',
    fontSize: 16
  }
});