import React from "react";
import { Icon } from "./icon";

interface MobileTerminalHeaderProps {
  instanceName?: string;
  onBack?: () => void;
  onMenuToggle?: () => void;
  onClose?: () => void;
  onFontSizeChange?: (delta: number) => void;
  isVisible: boolean;
  connectionStatus?: "connecting" | "connected" | "disconnected" | "error";
}

export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
  instanceName,
  onBack,
  onMenuToggle,
  onClose,
  onFontSizeChange,
  isVisible,
  connectionStatus = "connecting",
}) => {
  return (
    <div
      className={`mobile-terminal-header ${isVisible ? "visible" : "hidden"}`}
    >
      <div className="mobile-terminal-header-left">
        {onBack && (
          <button
            className="mobile-terminal-header-button"
            onClick={onBack}
            type="button"
            aria-label="Go back"
          >
            <Icon name="arrow-left" size="sm" />
          </button>
        )}
        {onMenuToggle && (
          <button
            className="mobile-terminal-header-button"
            onClick={onMenuToggle}
            type="button"
            aria-label="Toggle menu"
          >
            <Icon name="menu" size="sm" />
          </button>
        )}
      </div>

      <div className="mobile-terminal-header-center">
        <span className="mobile-terminal-header-title">
          {instanceName || "Terminal"}
        </span>
        <span
          className={`mobile-terminal-header-status ${connectionStatus}`}
          aria-label={`Connection status: ${connectionStatus}`}
        />
      </div>

      <div className="mobile-terminal-header-right">
        {onFontSizeChange && (
          <>
            <button
              className="mobile-terminal-header-button"
              onClick={() => onFontSizeChange(-1)}
              type="button"
              aria-label="Decrease font size"
            >
              <span style={{ fontSize: "0.75rem" }}>A-</span>
            </button>
            <button
              className="mobile-terminal-header-button"
              onClick={() => onFontSizeChange(1)}
              type="button"
              aria-label="Increase font size"
            >
              <span style={{ fontSize: "1rem" }}>A+</span>
            </button>
          </>
        )}
        {onClose && (
          <button
            className="mobile-terminal-header-button"
            onClick={onClose}
            type="button"
            aria-label="Close terminal"
          >
            <Icon name="close" size="sm" />
          </button>
        )}
      </div>
    </div>
  );
};