import React, {useRef, useState} from "react";
import "../style/title_input.css";

export default function TitleInput({default_value, on_validated}: {
    default_value: string,
    on_validated: (a: string) => void
}) {
    const [value, setValue] = useState(default_value);
    const ref = useRef<HTMLInputElement>(null);
    
    return (
        <input className="title_input"
               ref={ref}
               type="text"
               value={value}
               onChange={event => setValue(event.target.value)}
               onBlur={_ => on_validated(value)}
               onKeyDown={event => {
                   if (event.key == 'Enter')
                       ref.current?.blur();
               }}
        />
    )
}