import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { apiService } from '../services/api';

export default function PostsScreen({ filter }: { filter: string }) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    apiService.getPosts().then(setPosts);
  }, []);

  const filtered = posts.filter((p: any) => p.title.toLowerCase().includes(filter.toLowerCase()));

  return (
    <View style={styles.container}>
      <FlatList
        data={filtered}
        keyExtractor={(item: any) => item.id.toString()}
        renderItem={({ item }: any) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>{item.body}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  item: { padding: 16, borderBottomWidth: 1 },
  title: { fontWeight: 'bold' },
});