import { useState } from "react";
import PixelButton from "./PixelButton.jsx";

export default function PromptComposer({ disabled, onSubmit }) {
  const [value, setValue] = useState("");

  async function handleSubmit() {
    const prompt = value.trim();
    if (!prompt) {
      return;
    }

    await onSubmit(prompt);
    setValue("");
  }

  return (
    <div className="prompt-composer">
      <label className="prompt-composer__label" htmlFor="prompt-box">
        COMMAND INPUT
      </label>
      <textarea
        id="prompt-box"
        value={value}
        disabled={disabled}
        onChange={(event) => setValue(event.target.value)}
        onKeyDown={(event) => {
          if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            handleSubmit();
          }
        }}
        placeholder="Write a prompt and hit Enter..."
      />
      <div className="prompt-composer__actions">
        <span>Enter = send / Shift+Enter = newline</span>
        <PixelButton tone="amber" disabled={disabled || !value.trim()} onClick={handleSubmit}>
          Send Prompt
        </PixelButton>
      </div>
    </div>
  );
}