import {
  View,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  RefreshControl,
} from "react-native";
import { useTheme, Card, Text, Button } from "react-native-paper";
import { Link } from "expo-router";
import { useState, useEffect } from "react";
import useLocationStore from "@/locationStore";

export default function Index() {
  const theme = useTheme();
  const { locations } = useLocationStore();

  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 && 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",
  },
});