import { Pressable, StyleSheet, Text, View } from 'react-native';
import React from 'react';
import OrderReceiptItem from '../components/OrderReceiptItem';


interface OrderHistoryCardProps {
  navigationHandler: any;
  CartList: any;
  CartListPrice: string;
  OrderDate: string;
}

const OrderReceiptCard: React.FC<OrderHistoryCardProps> = ({
  navigationHandler,
  CartList,
  CartListPrice,
  OrderDate,
}) => {

  return (
    <View style={{borderColor: 'gray', borderWidth:1, marginBottom: 10}}>
      <View style={{justifyContent: 'flex-end', padding: 10, backgroundColor: '#EEEEEE'}}>
        <Text style={{fontWeight: 600}}>{OrderDate}</Text>
      </View>
      
      <View style={{gap: 10}}>
        <View style={{borderColor: 'black', borderWidth: 0.5, borderStyle: 'dashed'}}/>
        {CartList.map((data: any, index: any) => (
          <Pressable key={index.toString() + data.id} onPress={() => {
            navigationHandler({
                index: data.index,
                id: data.id,
                type: data.type,
              });
            }}>
            <OrderReceiptItem
              type={data.type}
              name={data.name}
              donutname={data.donutname}
              image_item={data.image_item}
              prices={data.prices}
              ItemPrice={data.ItemPrice}
            />
          </Pressable>
        ))}
      </View>
      <View style={{borderColor: 'black', borderWidth: 0.5, borderStyle: 'dashed'}}/>
      <View style={{flexDirection: 'row', justifyContent: 'space-between', gap: 20, alignItems: 'center', padding: 10}}>
          <Text style={{fontWeight: 600}}>Total Amount</Text>
          <Text style={{fontWeight: 600}}>$ {CartListPrice}</Text>
        </View>
    </View>
  )
}

export default OrderReceiptCard

const styles = StyleSheet.create({})