import Link from "next/link";
import { Suspense } from "react";
import { ProfileTabs } from "./ProfileTabs";
import { ProfileAvatar, ProfileAvatarShimmer } from "./ProfileAvatar";
import { NewTrailButton } from "../../NewTrailButton";
import { UserMenu } from "../../UserMenu";
import "./ProfileShell.css";

export async function ProfileShell({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ handle: string }>;
}) {
  const { handle: rawHandle } = await params;
  const handle = decodeURIComponent(rawHandle);

  return (
    <div className="ProfileShell">
      <div className="ProfileShell-header">
        <div className="ProfileShell-titleRow">
          <Link href="/" className="ProfileShell-homeLink">
            sidetrail
          </Link>
          <div className="ProfileShell-actions">
            <NewTrailButton />
            <UserMenu />
          </div>
        </div>
        <div className="ProfileShell-userInfo">
          <Suspense fallback={<ProfileAvatarShimmer />}>
            <ProfileAvatar handle={handle} />
          </Suspense>
          <h1 className="ProfileShell-username">@{handle}</h1>
        </div>
      </div>
      <div className="ProfileShell-content">
        <ProfileTabs handle={handle} />
        {children}
      </div>
    </div>
  );
}
