import { FaFacebookF, FaTwitter, FaWhatsapp } from "react-icons/fa"
import { CiLinkedin } from "react-icons/ci"
import { IoMdClose } from "react-icons/io"
import { IoMdCopy  } from "react-icons/io"
const ShareModals = () => {
    return (
        <>
            <div class="min-w-screen h-screen animated fadeIn faster  fixed  left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-no-repeat bg-center bg-cover" id="modal-id">
                <div class="w-full  max-w-lg  relative mx-auto my-auto rounded-xl shadow-lg  bg-white border pb-20">
                    {/* <!--content--> */}
                    <div class="grid grid-cols-1 ">
                        {/* <!--body--> */}
                        <div class="flex  justify-between items-center text-center mx-10 mb-10 mt-5">
                            <h2 class="text-2xl font-semibold">Share</h2>
                            <IoMdClose className="text-2xl" />
                        </div>
                        <div className="flex justify-between mx-10">
                            <a
                                href=""
                                className="flex p-4 items-center justify-center rounded-full bg-[#ECF0F3]  text-xl"
                            >
                                <FaFacebookF className="text-3xl" />
                            </a>
                            <a
                                href=""
                                className="flex p-4 items-center justify-center rounded-full bg-[#ECF0F3] "
                            >
                                <FaTwitter className="text-3xl" />
                            </a>
                            <a
                                href=""
                                className="flex p-4 items-center justify-center rounded-full bg-[#ECF0F3]  text-xl"
                            >
                                <FaWhatsapp className="text-3xl" />
                            </a>
                            <a
                                href=""
                                className="flex p-4 items-center justify-center rounded-full bg-[#ECF0F3] text-xl  "
                            >
                                <CiLinkedin className="text-3xl" />
                            </a>
                        </div>
                        {/* <!--footer--> */}
                        <div className="grid  mt-10 mx-10 ">
                            <label htmlFor="Page link" className="text-lg font-semibold mb-2">Page link</label>
                            <div className="flex bg-[#ECF0F3] rounded-lg py-3 px-5 space-x-10 justify-between">
                            <input type="text" className=" w-full bg-[#ECF0F3] outline-none" 
                            value="https://shopee.co.id/Teh-Tarik"
                            />
                            <IoMdCopy className="text-3xl"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ShareModals;