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="p-5">
                <div className="d-flex align-items-center justify-content-between px-2 mb-2">
                    <div>
                        <h2 style={{ fontSize: 28 }}>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>
        </Fragment>
    );
};

export default GiftcardListing;