import { Show } from "solid-js";

export interface PromptProps {
  prompt: { label: string; verb: string } | null;
  message: string | null;
}

/** Interaction prompt and transient message line. */
export function Prompt(props: PromptProps) {
  return (
    <>
      <Show when={props.prompt}>
        {(prompt) => (
          <div class="prompt">
            <span class="prompt__key">E</span>
            <span class="prompt__verb">{prompt().verb}</span>
            <span class="prompt__label">{prompt().label}</span>
          </div>
        )}
      </Show>

      <Show when={props.message}>
        {(message) => <div class="message">{message()}</div>}
      </Show>
    </>
  );
}
