import * as React from "react";

type Props = { onAdd: (text: string) => void };

export const Input = ({ onAdd }: Props) => {
  const [text, setText] = React.useState("");

  const sendText = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key !== "Enter") return;
    onAdd(text);
    setText("");
  };

  return (
    <div className="panel-block">
      <input
        className="input"
        type="text"
        placeholder="Enter to add a task"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={sendText}
      />
    </div>
  );
};