import React from "react";
import { usePtwNavigation } from "../../context/PtwNavigationContext.jsx";

export default function PageHeader({
  title,
  subtitle,
  actions,
  showBack,
  onBack,
  backLabel = "Back"
}) {
  const nav = usePtwNavigation();
  const shouldShowBack = showBack ?? nav?.showBack ?? false;
  const handleBack = onBack ?? nav?.goBack;

  return (
    <header className="portal-page-header">
      <div className="portal-page-header__main">
        {shouldShowBack && handleBack ? (
          <button type="button" className="portal-page-back" onClick={handleBack}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
            {backLabel}
          </button>
        ) : null}
        <div className="portal-page-header__text">
          <h1 className="portal-page-title">{title}</h1>
          {subtitle ? <p className="portal-page-subtitle">{subtitle}</p> : null}
        </div>
      </div>
      {actions ? <div className="portal-page-header__actions">{actions}</div> : null}
    </header>
  );
}
