---

import useProfileStore from "../store/profileStore";

export default function ProfileModal() {

  const {
    isOpen,
    profile,
    close
  } = useProfileStore();

  if (!isOpen || !profile) return null;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">

      <div className="w-[520px] bg-[#18191c] rounded-3xl overflow-hidden border border-white/5 shadow-2xl">

        <div className="h-36 bg-gradient-to-br from-indigo-600 to-violet-700 relative">

          <button
            onClick={close}
            className="absolute top-4 right-4 text-white/70 hover:text-white text-lg transition-all"
          >
            ✕
          </button>

        </div>

        <div className="px-6 pb-6 relative">

          <div className="absolute -top-16 left-6">

            {profile.avatar ? (

              <img
                src={profile.avatar}
                className="w-32 h-32 rounded-full border-8 border-[#18191c] object-cover shadow-xl"
              />

            ) : (

              <div className="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 border-8 border-[#18191c] shadow-xl" />

            )}

          </div>

          <div className="pt-20">

            <div className="flex items-center gap-3">

              <h2 className="text-3xl font-bold">
                {profile.username}
              </h2>

              <div className="px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-semibold border border-emerald-500/20">
                ONLINE
              </div>

            </div>

            <div className="mt-6 bg-[#111214] rounded-2xl p-5 border border-white/5">

              <div className="text-xs uppercase tracking-wider text-zinc-500 mb-2 font-bold">
                About Me
              </div>

              <div className="text-zinc-300 leading-relaxed">

                {profile.bio || "Wecord user"}

              </div>

            </div>

            <div className="mt-5 flex gap-3">

              <button className="flex-1 py-3 rounded-xl bg-indigo-600 hover:bg-indigo-500 transition-all font-semibold">
                Message
              </button>

              <button className="flex-1 py-3 rounded-xl bg-[#2b2d31] hover:bg-[#36393f] transition-all font-semibold">
                Add Friend
              </button>

            </div>

          </div>

        </div>

      </div>

    </div>
  );

}