import { addRecipe } from "../services/backend.js";

function AddRecipe() {
  const addRecipeForm = async (event: React.FormEvent) => {
    event.preventDefault();
    const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
    const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;

    if (nameElement && cuisineElement) {

      const name = nameElement.value;
      const cuisine = cuisineElement.value;
      await addRecipe(name, cuisine);
    }

  }
  return (
    <div className="add-recipe-outer">
      <form onSubmit={addRecipeForm} className="add-recipe-form">
        <input
          type="text"
          placeholder="name"
          className="ar-name"
          id="ar-name"
        />
        <input
          type="text"
          placeholder="cuisine"
          className="ar-cusine"
          id="ar-cuisine"
        />
        <button type="submit" className="ar-button">
          submit
        </button>
      </form>
    </div>
  )
}
export default AddRecipe