import Image from "next/image";

export default function ProfileTemplate({ userData, setIsEditing }) {

    return (
        <>
            <div className="bg-white w-full justify-end flex flex-col gap-5 px-3 md:px-16 lg:px-28 md:flex-row text-[#161931]">
                <main className="w-full min-h-screen py-1 md:w-2/3 lg:w-3/4">
                    <div className="p-2 md:p-4">
                        <div className="w-full px-6 pb-8 mt-8 sm:max-w-xl sm:rounded-lg">
                            <h2 className="pl-6 text-2xl font-bold sm:text-xl">Profile Information</h2>

                            <div className="grid max-w-2xl mx-auto mt-8">
                                <div className="flex flex-col justify-center space-y-5 sm:flex-row sm:space-y-0">
                                    <Image
                                        className="object-cover w-40 h-40 p-1 rounded-full ring-2 ring-indigo-300 dark:ring-indigo-500"
                                        width={200}
                                        height={200}
                                        src={userData?.image}
                                        alt="Bordered avatar" />
                                </div>

                                <div className="items-center mt-8 sm:mt-14 text-[#202142]">

                                    <div
                                        className="flex flex-col items-center w-full mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0 sm:mb-6">
                                        <div className="w-full">
                                            <label htmlFor="first_name"
                                                className="block mb-2 text-sm font-medium text-indigo-900">
                                                Nickname</label>
                                            <input type="text" id="first_name"
                                                className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg
                                                 focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 opacity-60 hover:cursor-not-allowed"
                                                placeholder="Your first name"
                                                defaultValue={userData?.name}
                                                required
                                                disabled />
                                        </div>

                                    </div>

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="email"
                                            className="block mb-2 text-sm font-medium text-indigo-900">
                                            Email</label>
                                        <input type="email" id="email"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg
                                             focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 opacity-60 hover:cursor-not-allowed"
                                            placeholder="[email protected]"
                                            defaultValue={userData?.email}
                                            required
                                            disabled />
                                    </div>

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="address"
                                            className="block mb-2 text-sm font-medium text-indigo-900">Address</label>
                                        <input type="text" id="address"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg
                                             focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 opacity-60 hover:cursor-not-allowed"
                                            placeholder="Your address"
                                            defaultValue={userData?.address}
                                            required
                                            disabled />
                                    </div>

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="email"
                                            className="block mb-2 text-sm font-medium text-indigo-900">
                                            City</label>
                                        <input type="text" id="city"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg
                                             focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 opacity-60 hover:cursor-not-allowed"
                                            placeholder="Your city"
                                            defaultValue={userData?.city}
                                            required
                                            disabled />
                                    </div>

                                    <div className="flex justify-end">
                                        <button onClick={() => setIsEditing(true)}
                                            className="text-white bg-indigo-700  hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800">Edit Information</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>

        </>
    )
}