import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";

const OrderListing = () => {
    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    return (
        <Fragment>
            <div className="row">
                <div className="col-12 col-lg-12">
                    <div className="rightContent">
                        <div className="d-flex align-items-center justify-content-between px-2 mb-2">
                            <div>
                                <h2>Orders</h2>
                                <p>View all the orders</p>
                            </div>
                            <div>
                                <Button type="button" variant="" className="btnAdd m-0">
                                <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter
                                </Button>
                            </div>
                        </div>
                        <Table responsive className="listingTable">
                            <thead>
                                <tr>
                                    <th>
                                        <label className="check-container mb-0 ps-2" htmlFor="checkh">
                                            <input
                                                type="checkbox"
                                                id="checkh"
                                                className="check-box"
                                            />
                                            <span className="checkmark"></span>
                                        </label>
                                    </th>
                                    <th>Order ID</th>
                                    <th>Order Date</th>
                                    <th>Items</th>
                                    <th>Total Amount</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {array.map((data, index) => (
                                    <tr key={index}>
                                        <td>
                                            <label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
                                                <input
                                                    type="checkbox"
                                                    id={`check${index}`}
                                                    className="check-box"
                                                />
                                                <span className="checkmark"></span>
                                            </label>
                                        </td>
                                        <td>ID_8797878</td>
                                        <td>29 Jan 2024</td>
                                        <td>Edge City Climb <span>+3more</span></td>
                                        <td>$ 499</td>
                                        <td><div className="statusDiv processing">Processing</div></td>
                                        <td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
                                    </tr>
                                ))}
                                <tr>
                                    <td colSpan={7}>Showing Results 10 of 1567</td>
                                </tr>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </div>
        </Fragment>
    );
};

export default OrderListing;