import { ArrowLeft, ChevronRight } from 'lucide-react-native';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export function FilteredItems({ data, back }: any) {
  return (
    <SafeAreaView>
      <View>
        <TouchableOpacity onPress={back}>
          <ArrowLeft size={24} color="#1e293b" />
        </TouchableOpacity>
        <Text>Natijalar ({data.length})</Text>
        <View style={{ width: 40 }} />
      </View>

      <FlatList
        data={data}
        contentContainerStyle={{ padding: 16 }}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.resultCard}>
            <View style={styles.resultInfo}>
              <Text style={styles.companyName}>{item.company_name}</Text>
              <Text style={styles.industryText}>{item.industry || 'Sanoat turi'}</Text>
            </View>
            <View style={styles.goIcon}>
              <ChevronRight size={18} color="#3b82f6" />
            </View>
          </TouchableOpacity>
        )}
      />
    </SafeAreaView>
  );
}

// Qo'shimcha stillar resultCard uchun
const styles = StyleSheet.create({
  resultCard: {
    backgroundColor: '#fff',
    padding: 16,
    borderRadius: 16,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#f1f5f9',
  },
  resultInfo: { flex: 1 },
  companyName: { fontSize: 16, fontWeight: '700', color: '#1e293b' },
  industryText: { fontSize: 13, color: '#64748b', marginTop: 4 },
  goIcon: { backgroundColor: '#eff6ff', padding: 8, borderRadius: 10 },
});
