Untitled

export default function DoneRecipes() {
  const [meals, storeMeals] = useStore([]);
  const [drinks, storeDrinks] = useStore([]);

  useEffect(() => {
    const getAPI = async () => {
      const responseMeals = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s=');
      const dataMeals = await responseMeals.json();
      storeMeals(dataMeals.meals);

      const responseDrinks = await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=');
      const dataDrinks = await responseDrinks.json();
      storeDrinks(dataDrinks.drinks);
    };
    getAPI();
  }, []);

  


  return (

    <div>
      <button data-testid="filter-by-all-btn">
        All
      </button>
      <button data-testid="filter-by-meal-btn">
        Meals
      </button>
      <button data-testid="filter-by-drink-btn">
        Drinks
      </button>
      <img data-testid={ `${index}-horizontal-image` } />
      <p data-testid={ `${index}-horizontal-top-text` }>
        texto 1 - nacionalidade
      </p>
      <p data-testid={ `${index}-horizontal-name` }>
        texto 2
      </p>
      <p data-testid={ `${index}-horizontal-done-date` }>
        texto 3
      </p>
      <button data-testid={ `${index}-horizontal-share-btn` }>
        <img src="src/images/shareIcon.svg" alt="Compartilhar" />
      </button>
      <p data-testid={ `${index}-${tagName}-horizontal-tag` }>
        tags
      </p>

    </div>

  //   <div>
  //     <Title>Done Recipes</Title>
  //     <ProfileIco />
  //   </div>
  );
}