import React, { useState, useEffect } from 'react';
import { orders } from '../mockData';
import './OrderTrackingScreen.css';

function OrderTracking({ currentUserId }) {
  const [userOrders, setUserOrders] = useState([]);

  useEffect(() => {
    // Фильтруем заказы по текущему пользователю
    const filteredOrders = orders.filter(order => order.userId === currentUserId);
    setUserOrders(filteredOrders);
  }, [currentUserId]);

  return (
    <div className="order-tracking-container">
      <h2>Мои заказы</h2>
      {userOrders.length === 0 ? (
        <p>Заказы отсутствуют</p>
      ) : (
        <table className="order-table">
          <thead>
            <tr>
              <th>Адрес доставки</th>
              <th>Дата доставки</th>
              <th>Время доставки</th>
              <th>Продукты</th>
              <th>Комментарий</th>
              <th>Статус</th>
            </tr>
          </thead>
          <tbody>
            {userOrders.map((order) => (
              <tr key={order.id}>
                <td>{order.address}</td>
                <td>{order.deliveryDate}</td>
                <td>{order.deliveryTime}</td>
                <td>{order.products.join(', ')}</td>
                <td>{order.comment}</td>
                <td>{order.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default OrderTracking;
