import React, { useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

const courses = [
  { id: '1', title: 'Computer Basics', price: 99, description: 'Learn the fundamental concepts of computer.' },
  { id: '2', title: 'Coding', price: 99, description: 'Master programming with hands-on examples.' },
  { id: '3', title: 'Hacking', price: 99, description: 'Understand cybersecurity and ethical hacking.' },
];

export default function App() {
  const [selectedCourse, setSelectedCourse] = useState(null);

  if (selectedCourse) {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>{selectedCourse.title}</Text>
        <Text style={styles.text}>{selectedCourse.description}</Text>
        <Text style={styles.text}>Price: Rs. {selectedCourse.price}</Text>
        <Button title="Enroll" onPress={() => alert("Enrolled successfully!")} />
        <Button title="Back" onPress={() => setSelectedCourse(null)} />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Available Courses</Text>
      <FlatList
        data={courses}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>₹{item.price}</Text>
            <Button title="View Details" onPress={() => setSelectedCourse(item)} />
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center' },
  header: { fontSize: 24, fontWeight: 'bold', marginBottom: 10 },
  title: { fontSize: 18, fontWeight: '600' },
  text: { fontSize: 16, marginVertical: 5 },
  item: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#ccc' },
});