import { observer } from "mobx-react";
// buzzwareTech imports
import { Avatar } from "@buzzwaretech/ui";
// hooks
import { useUser } from "@/hooks/store/user";
import { getFileURL } from "@buzzwaretech/utils";

export const ProfileSettingsSidebarHeader = observer(
  function ProfileSettingsSidebarHeader() {
    // store hooks
    const { data: currentUser } = useUser();

    return (
      <div className="flex shrink-0 items-center gap-2">
        <div className="shrink-0">
          <Avatar
            src={getFileURL(currentUser?.avatar_url ?? "")}
            name={currentUser?.display_name}
            size={32}
            shape="circle"
            className="text-16"
          />
        </div>
        <div className="truncate">
          <p className="truncate text-body-sm-medium">
            {currentUser?.first_name} {currentUser?.last_name}
          </p>
          <p className="truncate text-caption-md-regular">
            {currentUser?.email}
          </p>
        </div>
      </div>
    );
  },
);