Untitled

import { useEffect, useState } from 'react';
import {
  Container,
  Header,
  HeaderTitle,
  IconButton,
  LogoHeader,
  WrapperButtons,
  WrapperIconsFavorite,
  WrapperHeaderTitle,
} from './styles';
import shareImg from '../../images/share.svg';
import likeImg from '../../images/like.svg';
import dessertImg from '../../images/dessert.svg';

const initialStateRecipe = {
  strMeal: '',
  strInstructions: '',
  strMealThumb: '',
};
export function RecipeInProgress() {
  const [recipe, setRecipe] = useState(initialStateRecipe);

  function getRecipeById(id: number) {
    fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new Error('Erro ao buscar as refeições');
      })
      .then((data) => {
        const { meals } = data;
        const { strMeal, strInstructions, strMealThumb } = meals[0];
        setRecipe({ strMeal, strInstructions, strMealThumb });
      }).catch((error) => {
        console.error('Erro ao buscar as refeições:', error);
      });
  }
  useEffect(() => {
    getRecipeById(52772);
  }, []);

  const { strMeal, strInstructions, strMealThumb } = recipe;
  return (
    <Container>
      <Header imgSrc={ strMealThumb }>
        <WrapperIconsFavorite>
          <LogoHeader src={ dessertImg } />
          <WrapperButtons>
            <IconButton imgSrc={ shareImg } />
            <IconButton imgSrc={ likeImg } />
          </WrapperButtons>
        </WrapperIconsFavorite>
        <WrapperHeaderTitle>
          <HeaderTitle>{strMeal}</HeaderTitle>
        </WrapperHeaderTitle>
      </Header>
    </Container>
  );
}