import { useNavigate } from "react-router-dom";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { Icon } from "./icon";

interface MobilePageHeaderProps {
  title: string;
  showBack?: boolean;
  actions?: React.ReactNode;
}

export function MobilePageHeader({ title, showBack = true, actions }: MobilePageHeaderProps) {
  const navigate = useNavigate();
  const isMobile = useMobileViewport();

  if (!isMobile) return null;

  return (
    <div className="mobile-page-header">
      {showBack && (
        <button
          className="mobile-page-header-back"
          onClick={() => navigate(-1)}
          type="button"
          aria-label="Go back"
        >
          <Icon name="arrow-left" size="md" />
        </button>
      )}
      <h1>{title}</h1>
      {actions && <div className="mobile-page-header-actions">{actions}</div>}
    </div>
  );
}