import { Text, View, StyleSheet, ScrollView } from 'react-native';
import { BasicExample } from './BasicExample';
import { ScrollableExample } from './ScrollableExample';
import { ExampleThree } from './ExampleThree';
import { StickyTableExample } from './StickyColumnExample';
import { ExampleFour } from './ExampleFour';
import { ExampleFive } from './ExampleFive';
import SheetJSExample from './SheetJSExample';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.heading}>React Native Tabeller</Text>

      <View style={styles.section}>
        <Text style={styles.subheading}>Basic Table</Text>
        <BasicExample />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>Scrollable Table</Text>
        <ScrollableExample />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>
          Scrollable Sticky 1st Column Table
        </Text>
        <StickyTableExample />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>Example Three</Text>
        <ExampleThree />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>Example Four</Text>
        <ExampleFour />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>Example Five</Text>
        <ExampleFive />
      </View>

      <View style={styles.section}>
        <Text style={styles.subheading}>SheetJS Example</Text>
        <SheetJSExample />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    paddingHorizontal: 20,
    paddingTop: 60,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    alignSelf: 'center',
    maxWidth: 800,
    width: '100%',
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  section: {
    marginBottom: 30,
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    width: '100%',
  },
  subheading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 10,
  },
});