import type { ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import { IconArrowBack, IconAccount } from "./icons";

// Оболочка экранов: заголовок + опциональная кнопка «назад» + кнопка профиля.
export function Layout({
  title,
  children,
  back,
  showProfile = true,
}: {
  title: string;
  children: ReactNode;
  back?: string; // путь для кнопки «назад»
  showProfile?: boolean;
}) {
  const navigate = useNavigate();
  return (
    <div className="page">
      <header className="app-header">
        <div className="row row-gap" style={{ minWidth: 0 }}>
          {back && (
            <button className="icon-btn" onClick={() => navigate(back)} aria-label="Назад">
              <IconArrowBack />
            </button>
          )}
          <span className="app-title" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
            {title}
          </span>
        </div>
        {showProfile && (
          <button className="icon-btn" onClick={() => navigate("/profile")} aria-label="Профиль">
            <IconAccount />
          </button>
        )}
      </header>
      {children}
    </div>
  );
}