import React from 'react';

import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';

import {heightPercentageToDP as hp} from 'react-native-responsive-screen';

import {FONT} from '../../Utils/Globles';


const Services = () => {

 const renderItem = ({item}) => (

   <View style={styles.rowContainer}>

     <Text style={[styles.cell, {flex: 1}]}>{item.id}</Text>


     <TouchableOpacity style={styles.cellTouch}>

       <Text style={[styles.cell, {borderRightWidth: hp('0%')}]}>

         {item.predictedMonth}

       </Text>

     </TouchableOpacity>


     <Text style={styles.cell}>{item.taskName}</Text>

     <Text style={styles.cell}>{item.startDate}</Text>

     <Text style={styles.cell}>{item.endDate}</Text>

     <Text style={styles.cell}>{item.created}</Text>

     <Text style={[styles.cell, {flex: 3, color: '#A47636'}]}>

       {item.status}

     </Text>

   </View>

 );


 return (

   <View style={styles.container}>

     {/* Title Row */}

     <View style={styles.titleRow}>

       <Text style={[styles.headerCell, {flex: 1}]}>ID</Text>


       <Text style={styles.headerCell}>Predicted Month</Text>


       <Text style={styles.headerCell}>Task Name</Text>

       <Text style={styles.headerCell}>Start Date</Text>

       <Text style={styles.headerCell}>End Date</Text>

       <Text style={styles.headerCell}>Created</Text>

       <Text style={[styles.headerCell, {flex: 3}]}>Status</Text>

     </View>


     {/* Data Rows */}

     <View style={styles.flatListContainer}>

       <FlatList

         data={tableData}

         keyExtractor={item => item.id.toString()}

         renderItem={renderItem}

         showsVerticalScrollIndicator={false}

         contentContainerStyle={{flexGrow: 1}}

       />

     </View>

   </View>

 );

};



 const tableData = [

   {

     id: 1,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 2,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 3,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 4,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 5,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 6,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 7,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

   {

     id: 8,

     predictedMonth: 'February, 2024',

     taskName: 'Fuel Price Approval',

     startDate: '27-Dec-2023',

     endDate: '27-Jan-2024',

     created: '17-Jan-2024',

     status: 'Pending with Stakeholders for Review',

   },

 ];




const styles = StyleSheet.create({

 container: {

   marginTop: hp('1%'),

   borderWidth: hp('0.05%'),

   marginHorizontal: hp('1%'),

   height: hp('30.5'),

 },

 flatListContainer: {

   flex: 1,

 },

 titleRow: {

   flexDirection: 'row',

   backgroundColor: '#E0E0E0',

 },

 rowContainer: {

   flexDirection: 'row',

   borderBottomWidth: hp('0.05%'),

   borderColor: 'black',

 },

 headerCell: {

   flex: 2,

   textAlign: 'center',

   color: 'black',

   borderRightWidth: hp('0.05%'),

   borderColor: 'black',

   fontSize: hp('1.2%'),

   fontFamily: FONT.SEMI_BOLD,

   borderBottomWidth: hp('0.05%'),

   padding: hp('0.5%'),

 },

 cellTouch: {

   flex: 2,

   textAlign: 'center',

   color: 'black',

   borderRightWidth: hp('0.05%'),

   borderColor: 'black',

   fontSize: hp('1.2%'),

   padding: hp('0.5%'),

 },

 cell: {

   flex: 2,

   textAlign: 'center',

   color: 'black',

   borderRightWidth: hp('0.05%'),

   borderColor: 'black',

   fontSize: hp('1.2%'),

   padding: hp('0.5%'),

 },

});


export default Services;