import React, { useEffect } from "react";
import "./Delivered.css";
import Order_Details_Card from "../order_details_card/Order_Details_Card";
import { useDispatch, useSelector } from "react-redux";
import { getAllOrder } from "../../../../features/order/orderSlice";
import { encodeId } from "../../../../utils/common";

const Delivered = () => {
  

  const dispatch = useDispatch();
  const order = useSelector((state) => state.order.allOrders);

  useEffect(() => {
   const statusIds = [6]; 
         dispatch(getAllOrder({ order_status_id: statusIds }));
  }, [dispatch]);


  // console.log(order,"order order");
  
  return (
    <section className="Delivered Ordered">
      {order?.data?.map((item,index) => {
        return <Order_Details_Card data={item} baseLike={`/delivered-order/${encodeId(item?.id)}`} key={index}/>;
      })}

      <div className="no_data_main_div">
        <p className="no_data_text">No more orders to show</p>
      </div>
    </section>
  );
};

export default Delivered;
