text: import React, { useState } from "react";
  import { View, Text, StyleSheet, Button } from "react-native";
  
  import CartItem from "./CartItem";
  import Colors from "../../constants/Colors";
  
  import Card from "../UI/Card";
  
  const OrderItem = (props) => {
    const [showDetails, setShowDetails] = useState(false);
    return (
      <Card style={styles.orderItem}>
        <View style={styles.summary}>
          <Text style={styles.totalAmount}>{props.amount.toFixed(2)}</Text>
          <Text style={styles.date}>{props.date}</Text>
        </View>
        <Button
          color={Colors.primary}
          title={!showDetails ? "Show Details" : "Hide Details"}
          onPress={() => {
            setShowDetails((prevState) => !prevState);
          }}
        />
        {showDetails === true ? (
          <View style={styles.detailItem}>
            {props.items.map((cartItem) => {
              return (
                <CartItem
                  key={cartItem.productId}
                  quantity={cartItem.quantity}
                  amount={cartItem.amount}
                  title={cartItem.productTitle}
                />
              );
            })}
          </View>
        ) : null}
      </Card>
    );
  };
  
  const styles = StyleSheet.create({
    orderItem: {
      margin: 20,
      padding: 10,
      alignItems: "center",
    },
    summary: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      width: "100%",
      marginBottom: 15,
    },
    totalAmount: {
      fontFamily: "open-sans-bold",
      fontSize: 16,
    },
    date: {
      fontFamily: "open-sans",
      fontSize: 16,
      color: "#888",
    },
    detailItem: {
      width: "100%",
    },
  });
  
  export default OrderItem;
  