"use client";

import "./ProfileNav.scss";
import LogoutButton from "@/features/LogoutButton/LogoutButton";
import { Link, usePathname } from "@/shared/config/navigation";

interface IProfileNavProps {
  report_count: number;
}

const ProfileNav: React.FC<IProfileNavProps> = ({
  report_count,
}: IProfileNavProps) => {
  const pathname = usePathname();
  return (
    <nav className="profile-nav">
      <div>
        <Link
          id={
            pathname === "/profile/personal"
              ? "profile-nav__link"
              : ""
          }
          href="/profile/personal"
        >
          Личные данные
        </Link>
        <Link
          id={
            pathname === "/profile/my-reports"
              ? "profile-nav__link"
              : ""
          }
          href="/profile/my-reports"
        >
          Мои обращения
        </Link>
        <span>{report_count}</span>
      </div>

      {pathname === "/profile/personal" ? (
        <LogoutButton />
      ) : (
        <Link id="profile-nav__create-report" href="/create-report">
          Написать обращение
        </Link>
      )}
    </nav>
  );
};

export default ProfileNav;