import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import { TerminalComponent } from "../components/terminal";
import { Icon } from "../components/icon";

export const TerminalPage: React.FC = () => {
  const { instanceId } = useParams<{ instanceId: string }>();
  const navigate = useNavigate();

  if (!instanceId) {
    return (
      <section className="stack">
        <h1>Terminal</h1>
        <p className="muted">No instance ID provided.</p>
      </section>
    );
  }

  return (
    <section className="terminal-page">
      <div className="terminal-page-header">
        <button
          className="secondary-button"
          onClick={() => navigate(-1)}
          type="button"
        >
          <Icon name="arrow-left" size="sm" />
          Back
        </button>
        <h1>Terminal</h1>
      </div>
      <TerminalComponent
        instanceId={instanceId}
        onClose={() => navigate(-1)}
      />
    </section>
  );
};