import { type Component, For, Show } from "solid-js";
import type { CommanderEntry } from "./types";
import { getResultClass } from "./hooks";

export interface CommanderEntriesProps {
  entries: () => CommanderEntry[];
}

export const CommanderEntries: Component<CommanderEntriesProps> = (props) => {
  return (
    <div class="commander-entries flex-1 overflow-auto p-3 bg-white space-y-2">
      <Show
        when={props.entries().length > 0}
        fallback={
          <div class="text-gray-400 text-center py-8">暂无命令执行记录</div>
        }
      >
        <For each={props.entries()}>
          {(entry) => (
            <div class="border-l-2 border-gray-300 pl-3 py-1">
              <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                <span class="font-mono">{entry.command}</span>
                <span>
                  {entry.timestamp.toLocaleTimeString()}
                </span>
              </div>
              <div
                class={`text-sm whitespace-pre-wrap ${getResultClass(entry.result.type)}`}
              >
                {entry.result.message}
              </div>
            </div>
          )}
        </For>
      </Show>
    </div>
  );
};