text: import React, {useState} from 'react';
  import {StyleSheet, View, FlatList, TouchableOpacity} from 'react-native';
  import {AppText, FontTypes} from 'react-native-utthunga-ui-system';
  import {JobItem} from '../../components/list-items/job-item';
  import {JobFilterModal} from '../../components/modals';
  import {Colors} from '../../constants';
  
  export default function CockpitJobsTab({jobs = []}) {
    const [jobFilterModalVisible, setJobFilterVisible] = useState(false);
  
    return (
      <View style={styles.container}>
        <FlatList
          data={jobs}
          contentContainerStyle={styles.listContainer}
          renderItem={({item, index}) => {
            return <JobItem item={item} />;
          }}
          keyExtractor={(item, index) => String(index)}
          ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}
          ListHeaderComponent={() => (
            <View style={styles.listHeaderContainer}>
              <AppText style={styles.container}>
                {'Jobs grouped by criteria'}
              </AppText>
              <TouchableOpacity onPress={() => setJobFilterVisible(true)}>
                <AppText
                  size={16}
                  color={Colors.ui_primary}
                  fontType={FontTypes.semibold}>
                  {'Filter'}
                </AppText>
              </TouchableOpacity>
            </View>
          )}
          ListEmptyComponent={() => {
            return (
              <View style={styles.noListData}>
                <AppText>{'No Jobs Found!'}</AppText>
              </View>
            );
          }}
        />
        <JobFilterModal
          visible={jobFilterModalVisible}
          onHideModal={() => setJobFilterVisible(false)}
        />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    listHeaderContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 20,
      borderBottomWidth: 1,
      borderColor: Colors.ui_grey_2,
    },
    listContainer: {
      marginHorizontal: 15,
      marginTop: 10,
      borderWidth: 1,
      borderColor: Colors.ui_grey_2,
    },
    itemSeparator: {
      borderBottomWidth: 1,
      borderColor: Colors.ui_grey_2,
    },
    noListData: {
      flexGrow: 1,
      alignItems: 'center',
      justifyContent: 'center',
      padding: 10,
    },
  });
  