"use client";

import { useEffect, useState } from "react";
import { getParsedUserInfo, imageUrl } from "@/helper";
import Image from "next/image";

function Head() {
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    setUserInfo(getParsedUserInfo());
  }, []);

  return (
    <div className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]">
      <Image
        className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
        src={imageUrl(userInfo?.picture?.[0]?.url)}
        alt="profile"
        height={73}
        width={73}
      />
      <div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
        <p className="text-[#3B3B3B] text-[14px] font-bold">
          {userInfo?.realName}
        </p>
      </div>
    </div>
  );
}

export default Head;