import React from "react";
import { FaEdit } from "react-icons/fa";
import Navbar from "../../components/Elements/Navbar";

const FormProfile = () => {
  return (
      <div className="lg:ml-[20rem] w-full">
        <Navbar />
        <div className="p-4 md:p-8 mx-auto w-full">
          <div className="bg-white rounded-xl shadow-2xl p-6 md:p-8 w-full max-w-[80rem] mx-auto" style={{ marginLeft: '-200px' }}>
            <h1 className="text-2xl md:text-3xl font-semibold text-gray-700 mb-6 md:mb-8">
              Edit Profile
            </h1>
            <div className="flex flex-col items-center sm:flex-row mb-8">
              <div className="relative">
                <img
                  src="/image/catprofile.png"
                  alt="Profile"
                  className="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover"
                />
                <button className="absolute bottom-0 right-0 bg-purple-400 rounded-full p-2 border-4 border-white">
                  <FaEdit className="text-white" />
                </button>
              </div>
              <h2 className="text-2xl md:text-3xl font-semibold mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
                Rachel Derek
              </h2>
            </div>

            <form>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                <div>
                  <label className="block mb-2 text-sm text-gray-700">
                    First name
                  </label>
                  <input
                    type="text"
                    defaultValue="Rachel"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
                <div>
                  <label className="block mb-2 text-sm text-gray-700">
                    Last name
                  </label>
                  <input
                    type="text"
                    defaultValue="Derek"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                <div>
                  <label className="block mb-2 text-sm text-gray-700">Email</label>
                  <input
                    type="email"
                    defaultValue="RachelDerek14@gmail.com"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
                <div>
                  <label className="block mb-2 text-sm text-gray-700">Address</label>
                  <input
                    type="text"
                    defaultValue="Jl. Aja Dulu"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                <div>
                  <label className="block mb-2 text-sm text-gray-700">
                    Contact Number
                  </label>
                  <input
                    type="tel"
                    defaultValue="+60 857 225 345 7110"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
                <div>
                  <label className="block mb-2 text-sm text-gray-700">
                    Password
                  </label>
                  <input
                    type="password"
                    defaultValue="********"
                    className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-purple-300"
                  />
                </div>
              </div>

              <button
                type="submit"
                className="bg-purple-400 text-white px-6 py-2 md:px-8 md:py-3 rounded-md hover:bg-purple-500 w-full md:w-auto"
              >
                Save
              </button>
            </form>
          </div>
        </div>
      </div>
  );
};

export default FormProfile;
