import React, {useState} from "react";

const Modal = (props) => {
    const [showModal, setShowModal] = useState(false);
    return(
        <>
            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t ">
                    <h3 className="text-3xl font=semibold">General Info</h3>
                    <button
                        className="bg-transparent border-0 text-black float-right"
                        onClick={() => props.setShowModal(false)}
                    >
                    <span className="text-black opacity-7 h-6 w-6 text-xl block bg-gray-400 py-0 rounded-full">
                      x
                    </span>
                    </button>
                </div>
                <div className="relative p-6 flex-auto">
                    <div className="bg-gray-200 shadow-md rounded px-8 pt-6 pb-8 w-full">
                        <h3 className="block text-black text-sm font-bold mb-1">
                            Name : {props.name}
                        </h3>
                        <h3 className="block text-black text-sm font-bold mb-1">
                            Url : {props.url}
                        </h3>
                        <h3 className="block text-black text-sm font-bold mb-1">
                            Messages : {props.msg}
                        </h3>
                        <h3 className="block text-black text-sm font-bold mb-1">
                            ?
                        </h3>
                    </div>
                </div>
                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
                    <button
                        className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                        type="button"
                        onClick={() => props.setShowModal(false)}
                    >
                        Close
                    </button>
                </div>
            </div>
        </>

    )
}

export default Modal