import React, { useState, useEffect, useContext } from 'react';
import { Container, Card, Row, Col } from 'react-bootstrap';
import UserContext from '../UserContext';

export default function OrderHistory() {
  const { user } = useContext(UserContext);
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    // Assuming you have a function to fetch order history data from your backend
    fetchOrderHistory(user.id);
  }, [user.id]);

  const fetchOrderHistory = (userId) => {
    // Make a request to your backend to retrieve the order history for the user
    fetch(`${process.env.REACT_APP_API_URL}/orders/history/${userId}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`
      }
    })
      .then(response => response.json())
      .then(data => {
        setOrders(data);
      })
      .catch(error => {
        console.error('Error fetching order history:', error);
      });
  }

  return (
    <Container className="mt-5">
      <h1>Order History</h1>
      <Row>
        {orders.map(order => (
          <Col lg={4} key={order._id}>
            <Card>
              <Card.Body>
                <Card.Title>Order ID: {order._id}</Card.Title>
                <Card.Subtitle>Quantity: {order.quantity}</Card.Subtitle>
                <Card.Subtitle>Total Amount: {order.totalAmount}</Card.Subtitle>
                <Card.Text>Description: {order.description}</Card.Text>
                {/* Add more details about the order as needed */}
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
}
