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

const Profile = () => {
  return (
    <>

    <Drawer>


        {/* Flexbox for Centering with Shift */}
        <div className="flex justify-center items-center lg:my-16 my-5">
          <div className="bg-white border rounded-xl shadow-2xl py-8 justify-center  flex flex-col items-center  text-center w-full  mx-5 ">
            <div className="relative">
              <img src="/image/catprofile.png" alt="" className="w-full max-w-xs lg:max-w-lg " />
              <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 sm:text-4xl md:text-4xl font-semibold mt-4">
              Rachel Derek
            </h2>
            <p className="text-gray-500 mt-2 text-base sm:text-lg md:text-xl">RachelDerek14@gmail.com</p>
            <p className="text-gray-500 mt-1 text-base sm:text-lg md:text-xl">Jl. Aja Dulu</p>
            <p className="text-gray-500 mt-1 text-base sm:text-lg md:text-xl">+60 857 225 345 7110</p>

            <button
              type="button"
              className="bg-purple-400 text-white px-6 py-2 sm:px-8 sm:py-2 mt-6 sm:mt-8 rounded-md hover:bg-purple-500"
            >
              Edit
            </button>
          </div>
        </div>
   
    </Drawer>
    
    </>
    
  );
};

export default Profile;
