"use client"
import { ArrowUpIcon, PersonIcon, UserIcon } from "@/assets/svgs/Icons";
import LocalePath from "@/components/UiComponents/LocalePath";
import { openAuthModal } from "@/store/auth";
import { AppDispatch, RootState } from "@/store/store";
import { useTranslations } from "next-intl";
import React from "react";
import { useDispatch, useSelector } from "react-redux";

interface Props {
  isTab: boolean;
  btnClass: string;
}

const RegistrationBtn = ({ isTab, btnClass }: Props) => {
  const dispatch = useDispatch<AppDispatch>();
  const {full_name} = useSelector((state:RootState)=>state.ProfileConfig)
  const t = useTranslations();

  if(full_name){
    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">{full_name}</span>
        <ArrowUpIcon className="rotate-180" />
      </LocalePath>
    )
  }
  return (
    <button
      onClick={() => dispatch(openAuthModal({ startStep: 0 }))}
      className={btnClass}
    >
      <PersonIcon
        className={`${isTab ? "*:stroke-gray-200" : ""} group-hover:*:stroke-primary`}
      />
      {isTab && <span>{t("NAV.myAccount")}</span>}
      <span className="hidden xl:flex">{t("Text.auth")}</span>
    </button>
  );
};

export default RegistrationBtn;