import { getRecipeIngredients } from "../services/frontendApi.js";
import { useState, useEffect } from "react";
import { type Ingredient } from "../types/Recipe.ts"

function RecipeIngredients() {

  const [recipeIngredients, setRecipeIngredients] = useState<Ingredient[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadRecipeIngredients = async () => {
      try {
        const recipeIngredients = await getRecipeIngredients();
        setRecipeIngredients(recipeIngredients);
        console.log(recipeIngredients)
      } catch (err) {
        console.log(err);
        setError("Failed to load recipe ingredients...");
        console.log(error)
      } finally {
        setLoading(false);
      }
    };
    loadRecipeIngredients();
  }, []);
  console.log(recipeIngredients)
  return (
    // should this be a string[]? only if we are only returning raw. otherwise i will need to type and return the ingredient object. This template shoudl work for steps though, so maybe setting that up is a good first step
    <div className='page-outer'>
      {loading ? (
        <div className="loading">Loading...</div>
      ) : (
        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
          <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            {recipeIngredients.map(ing => (
              <li key={ing.id}>
                {ing.raw}
              </li>
            ))}
          </div>
        </div>
      )}
    </div>
  )

}
export default RecipeIngredients