"use client";
import React, { useEffect, useState } from "react";
import adminimg from "@images/pro2.png";
import DropdownBtn from "../DropdownBtn";
import { useContext } from "react";
import { MyContext } from "@/components/MyContext";

interface LocalStorageDetails {
  username: string;
  email: string;
}

const Adminsection: React.FC = () => {
  const { myState, setMyState, userInfo, setUserInfo } = useContext(MyContext);
  const [click, setClick] = useState(false);
  const [localStorageDetails, setLocalStorage] =
    useState<LocalStorageDetails | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const storedState = localStorage.getItem("myState");
      const userInfoFromlocal = localStorage.getItem("userDetail");
      if (userInfoFromlocal) {
        setUserInfo(JSON.parse(userInfoFromlocal));
      }
      if (storedState) {
        setMyState(storedState);
      }
    }
  }, []);

  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("myState", myState);
      localStorage.setItem("userDetail", JSON.stringify(userInfo));
    }
  }, [myState]);

  return (
    <div className="flex m-auto w-[60%]">
      <div
        className="rounded-[50px] !bg-top !bg-no-repeat w-[50px] h-[50px] mr-[15px] relative"
        style={{ background: `url(${adminimg.src})` }}
        // style={{ background: `url(/images/1689764585744_avatarr.jpg)` }}
        onClick={() => {
          setClick(!click);
        }}
      >
        {click && <DropdownBtn />}
      </div>
      {myState && (
        <div className="mx-0 my-auto">
          <span className="text-sm font-semibold">Hello {myState}!</span>
        </div>
      )}
    </div>
  );
};

export default Adminsection;