import React, {useState} from "react";
import Modal from "../Modal";

const QueueRow = (props) => {
    const [showModal, setShowModal] = useState(false);
    let style = `bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 cursor-pointer ${props.classname}`

    return (
        <>
            <tr className={style} onClick={() => setShowModal(true)}>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{props.number}</td>
                <td className="text-sm text-gray-900 font-light px-6 py-4">
                    {props.name}
                </td>
                <td className="text-sm text-gray-900 font-light px-6 py-4">
                    {props.msg}
                </td>
            </tr>
            {showModal ? (
                <>
                    <div className="flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
                        <div className="relative w-auto my-6 mx-auto max-w-3xl">
                            <Modal
                                setShowModal = {setShowModal}
                                name = {props.name}
                                url = {props.url}
                                msg = {props.msg}
                            />
                        </div>
                    </div>
                </>
            ): null }
        </>
    )
}

export default QueueRow