"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { FaUser } from "react-icons/fa";
import { FaChevronRight } from "react-icons/fa6";

import { PROFILE_AREA_MAPPING } from "@/constants/ui-helpers";
import Breadcrumbs from "@/components/common/breadcrumbs";
import CTAUserProfile from "@/components/pages/participant/profile/partials/cta";

/**
 * Note: Do NOT remove this layout component from this folder. Using this layout on the app folder is causing massive hydration issues because of the navbar and components that depend on the auth of the user to show/hide components.
 */

type ProfileHomepageProps = {
  children: React.ReactNode;
};

function ProfileLayout({ children }: ProfileHomepageProps) {
  const currentPath = usePathname();

  return (
    <div className="flex flex-col">
      <div className="flex flex-col lg:flex-row items-start lg:items-start px-8 lg:px-0 bg-participant-light dark:bg-participant-dark">
        {/* Left Section (Profile Menu) */}
        <div className="hidden lg:flex lg:flex-col ps-10 pt-14 font-inter space-y-10 lg:w-1/4">
          <h1 className="inline-flex font-inter items-center font-black text-2xl text-black dark:text-white tracking-tight">
            <FaUser className="size-4 me-2" />
            My profile
          </h1>
          <div className="flex flex-col space-y-4">
            {PROFILE_AREA_MAPPING.map(({ label, href }) => {
              return (
                <Link
                  key={label}
                  className={`${
                    currentPath === href
                      ? "underline-offset-2 underline decoration-dotted"
                      : ""
                  } font-bold flex flex-row items-center`}
                  href={href}
                >
                  {currentPath === href ? (
                    <FaChevronRight className="size-4 pe-2" />
                  ) : (
                    ""
                  )}
                  {label}
                </Link>
              );
            })}
          </div>
        </div>
        <div className="lg:hidden flex flex-col space-y-4">
          <h1 className="text-3xl font-black lg:hidden pt-6">My profile</h1>
          <Breadcrumbs />
        </div>
        {/* Right Section (Profile area) */}
        <div className="bg-white rounded-lg items-center justify-center w-full lg:3/4 mt-14 mb-12 lg:mb-8 lg:w-screen lg:me-12">
          {children}
        </div>
      </div>
      <div className="bg-participant-light dark:bg-participant-dark">
        <CTAUserProfile />
      </div>
    </div>
  );
}

export default ProfileLayout;