/**
 * Renders the header of a profile's full lists, `/users/:username/dumps`,
 * `/upvoted` and `/playlists`.
 *
 * @module
 */

import type { ReactNode } from "react";
import { Link } from "react-router";
import type { PublicUser } from "../../../shared/user.ts";
import { Avatar } from "../shared/Avatar.tsx";

/**
 * Passed to {@link ProfileSubpageHeader} by each of those pages, once it has
 * loaded the profile's user.
 */
export interface ProfileSubpageHeaderProps {
  /** The `:username` of the route, which the back link leads to. */
  username: string;
  profileUser: PublicUser;
  title: string;
  /** Buttons at the end of the title row. */
  actions?: ReactNode;
}

/**
 * Renders a link back to the profile, then the page's title beside the user's
 * avatar.
 */
export function ProfileSubpageHeader(
  { username, profileUser, title, actions }: ProfileSubpageHeaderProps,
): React.JSX.Element {
  return (
    <div className="profile-subpage-header">
      <Link to={`/users/${username}`} className="profile-subpage-back">
        ← {profileUser.username}
      </Link>
      <div className="profile-subpage-title-row">
        <Avatar
          userId={profileUser.id}
          username={profileUser.username}
          hasAvatar={!!profileUser.avatarMime}
          size={36}
        />
        <h1 className="profile-subpage-title">{title}</h1>
        {actions}
      </div>
    </div>
  );
}