import React, { Suspense } from "react";
import { useTranslations } from "next-intl";
import LocalePath from "@/components/UiComponents/LocalePath";
import AppSkeleton from "@/components/UiComponents/Loader/AppSkeleton";
import RegistrationBtn from "./RegistrationBtn";

import { ArrowUpIcon, UserIcon } from "@/assets/svgs/Icons";

interface Props {
  isTab?: boolean;
  profile:any;
}


const ProfileContent = ({ isTab, profile }: { isTab: boolean; profile: any }) => {
  
  const btnClass = isTab
    ? "flex flex-col gap-1 items-center"
    : "app-btn btn-primary group p-3 !min-w-fit xl:min-w-[200px]";

  if(profile?.full_name && isTab) return 
  if (profile?.full_name && !isTab) {
    return (
      <LocalePath
        href="/account/profile"
        className="flex items-center gap-2 font-semibold bg-greynormal rounded-xl p-4 min-w-40 max-w-[300px]"
      >
        <UserIcon />
        <span className="whitespace-nowrap line-clamp-1">{profile.full_name}</span>
        <ArrowUpIcon className="rotate-180" />
      </LocalePath>
    );
  }

  return <RegistrationBtn isTab={isTab} btnClass={btnClass} />;
};


const ProfileBtn = ({ isTab = false , profile }: Props) => {
  return (
    <Suspense
      fallback={<AppSkeleton height="56px" className="p-3 !min-w-fit xl:!min-w-[200px]" />}
    >
      <ProfileContent isTab={isTab} profile={profile} />
    </Suspense>
  );
};


export default ProfileBtn;