import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";

const ActivityListing = () => {
    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>Activities</h2>
                                <p>View all the Activities</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>Category</th>
                                    <th>Sub Category</th>
                                    <th>Name</th>
                                    <th>Location</th>
                                    <th>Price</th>
                                    <th>Place</th>
                                    <th>Gift</th>
                                    <th></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><span>Adventure</span></td>
                                        <td>Ice-Skating</td>
                                        <td>Ice-Skating in NY</td>
                                        <td>North Avenue</td>
                                        <td>$ 479</td>
                                        <td>Outdoor</td>
                                        <td>Allowed</td>
                                        <td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
                                        <td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
                                    </tr>
                                ))}
                                <tr>
                                    <td colSpan={10}>Showing Results 10 of 1567</td>
                                </tr>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </div>
        </Fragment>
    );
};

export default ActivityListing;