import { FlatList, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { Book } from './Book';
import styles from './List.styles';

const books: Book[] = [
  {
    id: 1,
    title: 'JavaScript - das umfassende Handbuch',
    author: 'Philip Ackermann',
    isbn: '978-3836286299',
    rating: 5,
  },
  {
    id: 2,
    title: 'Clean Code',
    author: 'Robert Martin',
    isbn: '978-0132350884',
    rating: 4,
  },
  {
    id: 3,
    title: 'Design Patterns',
    author: 'Erich Gamma',
    isbn: '978-0201633610',
    rating: 5,
  },
];

const List: React.FC = () => {
  return (
    <SafeAreaView style={styles.view} edges={['top', 'left', 'right']}>
      <Text style={styles.headline}>Bücherverwaltung</Text>

      <FlatList<Book>
        style={styles.list}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        data={books}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text style={{ color: 'black' }}>{item.title}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default List;
