const [search, setSearch] = useState("");
const [recipes, setRecipes] = useState([]);
const [loading, setLoading] = useState(false);
const [hasSearched, setHasSearched] = useState(false);
const [selectedRecipe, setSelectedRecipe] = useState(null);

-----------------

<div className="recipe-container mt-6">
          {loading ? (
            <>
              <div className="flex justify-center items-center">
                <div className="loader"></div>
              </div>
              <p className="text-xl text-gray-600 mt-3">
Fetching delicious recipes.....
              </p>
            </>
) : !hasSearched ? (
            <p className="text-gray-500 text-center text-base sm:text-lg">
Your recipes will be displayed here
            </p>
) : recipes.length === 0 ? (
            // Error Message Box
            <div className="error-msg-container flex flex-col items-center justify-center py-6 px-4 md:px-6 lg:px-10">
              <FontAwesomeIcon
                icon={faBug}
                style={{ color: "rgb(255, 60, 44)" }}
                className="text-2xl mb-2"
              />
              <p className="text-red-600 text-center text-sm md:text-base">
Recipe not found
              </p>
              <p className="text-red-600 text-center text-sm md:text-base mt-1">
Please check the name or try searching again.
              </p>
            </div>
) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 recipe-grid gap-2">
              {recipes.map((recipe) => (
                <div
                  key={recipe.id}
                  className="dish flex flex-col cursor-pointer"
                  onClick={() => {
                    setSelectedRecipe(recipe);
}}
                >
                  <div className="img-container">
                    <img src={recipe.thumbnail_url} alt={recipe.name} />
                  </div>
                  <div className="dish-text p-3">
                    <p className="name text-lg line-clamp-1">{recipe.name}</p>
                    <p className="text-base mt-2 sm:mt-3">
                      <span className="prep -ml-0.75">⏱ Prep Time:</span>{" "}
                      {recipe.total_time_minutes
? recipe.total_time_minutes < 60
? `${recipe.total_time_minutes} mins`
: `${(recipe.total_time_minutes / 60).toFixed(1)} hrs`
: "N/A"}
                    </p>
                  </div>
                </div>
))}
            </div>
)}
</div>