import { Show } from "solid-js";

/**
 * Status bar along the bottom of the window. The message lives in an
 * `<output>`, which is implicitly a polite live region, so progress reports
 * and problems are announced without stealing focus.
 */
export default function StatusBar(props: { message?: string; isError?: boolean }) {
  return (
    <footer class="col-span-2 border-t border-outline-variant bg-surface-container-low px-4 py-1 text-body-sm">
      <output class={props.isError ? "text-error" : "text-on-surface-variant"}>
        <Show when={props.message} fallback="Ready">
          {(message) => message()}
        </Show>
      </output>
    </footer>
  );
}