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

const GiftcardListing = () => {
    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const [showMenuIndex, setShowMenuIndex] = useState(null);

    const toggleMenu = (index) => {
        setShowMenuIndex(index === showMenuIndex ? null : index);
    };

    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>Gift Card Requests</h2>
                                <p>View all the gift cards</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>Name</th>
                                    <th>Amount</th>
                                    <th>Phone Number</th>
                                    <th>Sender Email Address</th>
                                    <th>Receiver Email Address</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>Michael Anderson</td>
                                        <td>$ 499</td>
                                        <td>+91 9865 43210</td>
                                        <td>adventuretrails@example.com</td>
                                        <td>john@example.com</td>
                                        <td>
                                            <div className="actions">
                                                <div className="ellipse" onClick={() => toggleMenu(index)}>
                                                    <Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
                                                </div>
                                                {showMenuIndex === index && (
                                                    <div className="menu">
                                                        <ul>
                                                            <li>Delete</li>
                                                        </ul>
                                                    </div>
                                                )}
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                                <tr>
                                    <td colSpan={7}>Showing Results 10 of 1567</td>
                                </tr>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </div>
        </Fragment>
    );
};

export default GiftcardListing;