import { useState } from "react";
import Banner from "../components/Banner";
import RecipeSearchBar from "../components/inputs/RecipeSearchBar";
import { type Recipe } from "../types/recipe";
import RecipeSearchResult from "../components/items/RecipeSearchResult";
import Spinner from "../components/Spinner";

export default function SearchPage() {
  const [recipes, setRecipes] = useState<Recipe[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  return (
    <>
      <Banner content="Recipe Search" />
      <RecipeSearchBar redirect={false} searchOnLoad={true} favorites={false} setRecipes={setRecipes} loading={loading} setLoading={setLoading} />
      <hr className="text-gray-300 w-full" />

      <div className="flex flex-col w-full p-4 items-center">
        {loading && (
          <div className="w-full flex items-center justify-center gap-x-2 py-4">
            <Spinner content="Loading recipes..." />
          </div>
        )}
        {!loading && (
          <>
            {recipes?.map(recipe => <RecipeSearchResult key={recipe.Id} recipe={recipe} />)}
            <p className="text-gray-700 text-sm py-4">{recipes ? "End of results" : "No reuslts"}</p>
          </>
        )}
      </div>
    </>
  );
}
