import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  FlatList,
  StyleSheet,
  StatusBar,
} from 'react-native';
import { SAMPLE_ASSETS } from '../../constants/data';
import { COLORS } from '../../constants/color';
import {  } from '../../types/type';
import { SearchBar } from '../../components/searchbar';
import { AssetCard } from '../../components/assetCard';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import BottomTabBar from '../../navigation/bottonTabBar';
import { ScrollView } from 'react-native';



export default function AssetsScreen() {
  const [search, setSearch] = useState('');

  const filteredAssets = SAMPLE_ASSETS.filter(
    (item) =>
      item.name.toLowerCase().includes(search.toLowerCase()) ||
      item.location.toLowerCase().includes(search.toLowerCase())
  );

  return (
   <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
    <ScrollView>
      <StatusBar barStyle="light-content" backgroundColor={COLORS.background} />
      <View style={styles.content}>
        {/* Header Section */}
        <Text style={styles.title}>Assets</Text>
        <Text style={styles.subtitle}>251 assets · 242 online</Text>

        {/* Search */}
        <SearchBar value={search} onChangeText={setSearch} />

        {/* Assets List */}
         <FlatList
          data={filteredAssets}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <AssetCard asset={item} />}
          showsVerticalScrollIndicator={false}
        /> 
      </View>
        </ScrollView>
       <BottomTabBar />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 16,
  },
  title: {
    color: COLORS.textPrimary,
    fontSize: 28,
    fontWeight: 'bold',
  },
  subtitle: {
    color: COLORS.textSecondary,
    fontSize: 14,
    marginTop: 4,
    marginBottom: 16,
  },
});