import { Image, ImageProps, StyleSheet, Text, View } from 'react-native'
import React from 'react'


interface OrderReceiptItemProps{
    type: string;
    name: string;
    donutname: string;
    image_item: ImageProps;
    prices: any;
    ItemPrice: string;
  }


const OrderReceiptItem: React.FC<OrderReceiptItemProps> = ({
    type,
    name,
    donutname,
    image_item,
    prices,
    ItemPrice,
}) => {
  return (
    <View style={{paddingHorizontal: 10, marginBottom: 10}}>
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        <View style={{flexDirection: 'row', gap: 10, alignItems: 'center'}}>
          <Image source={image_item} style={{width: 50, height: 50}} />
          {prices.map((item: any, index: any) => (
            <View key={index.toString()}>
                <Text style={{width: 200}}>{name || donutname} <Text style={{fontWeight: 600}}>{item.size}</Text></Text>
            </View>
          ))}
        </View>
        <View>
          <Text>${ItemPrice}</Text>
        </View>
      </View>
      {prices.map((data: any, index: any) => (
        <View key={index.toString()} style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', marginTop: 10}}>
            <View style={{flex:1, flexDirection: 'row', gap: 10}}>
                <Text>${data.price}</Text>
                <Text>X {data.quantity}</Text>
            </View>
            <Text>${(data.quantity * data.price).toFixed(2).toString()}</Text>
        </View>
      ))}
    </View>
  )
}

export default OrderReceiptItem

const styles = StyleSheet.create({})