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

export default function Index() {
  const theme = useTheme();
  const locations = useLocationStore((state) => state.locations);

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <FlatList
        data={locations}
        keyExtractor={(item) => item.id.toString()}
        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.split('.')[0]}...</Text>
            </Card.Content>
            <Card.Actions>
              <Link href={`/location/${item.id}`} asChild>
                <Button>Zobacz więcej</Button>
              </Link>
            </Card.Actions>
          </Card>
        )}
      />
    </View>
  );
}

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