import { View, StyleSheet, FlatList } from 'react-native';
import { useTheme, Card, Text, Button} from 'react-native-paper';
import { Link } from 'expo-router';

import { Locations } from '@/constants/Locations';

export default function Index() {
const theme = useTheme();
  return (
    <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
      <FlatList 
        data={Locations}
        keyExtractor={(item) => item.name}
        renderItem={({ item }) => (
          <Card style={{ margin: 10}}>
            <Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
            <Card.Content style={{ marginBottom:10 }}>
              <Text variant="titleLarge">{item.name}</Text>
              <Text variant="bodyMedium">{item.description}</Text>
            </Card.Content>
            <Card.Actions>
            <Link href={`/location/${item.id}`} asChild>
              <Button>Zobacz więcej</Button>
              </Link>
            </Card.Actions>
          </Card>
        )}>  
        </FlatList>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
  },
});