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

interface ProfileSubpageHeaderProps {
  username: string;
  profileUser: PublicUser;
  title: string;
  actions?: ReactNode;
}

export function ProfileSubpageHeader(
  { username, profileUser, title, actions }: ProfileSubpageHeaderProps,
) {
  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>
  );
}