const [commands, setCommands] = useState<CommandLine[]>([]);

export const getNewCommand = (
  command: string,
  terminalProps: TerminalProps,
) => {
  const id = Date.now().toString();

  const newCommand: CommandLine = {
    id,
    prompt: terminalProps.prompt,
    command,
    outputs: [],
  };

  if (command === "date") {
    newCommand.outputs.push({
      text: new Date().toString(),
      variant: "success",
    });
  } else if (command === "random") {
    newCommand.outputs.push({
      text: Math.floor(Math.random() * 10).toString(),
      variant: "success",
    });
  } else if (command.startsWith("print ")) {
    newCommand.outputs.push({
      text: command.replace("print ", ""),
      variant: "success",
    });
  } else {
    newCommand.outputs.push({
      text: `Command '${command}' not found`,
      variant: "error",
    });
  }

  return newCommand;
};

const handleCommand = (command: string) => {
  if (command === "clear") {
    setCommands([]);
    return;
  }

  const newCommand = getNewCommand(command, terminalProps);
  setCommands((prevCommands) => [...prevCommands, newCommand]);
};

<Terminal
  welcome=`Welcome to Terminal
	- Type 'date' to get the current date
	- Type 'random' to get a random number
	- Type 'print [text]' to print text
	- Type 'clear' to clear the terminal`
  prompt="it-tools $"
  commands={commands}
  onCommand={handleCommand}
/>