import type { Recipe } from "../../types/recipe";
import RecipePlaceholder from "../../assets/images/recipe_placeholder.png"
import LikeButton from "../buttons/LikeButton";
import { EngagementViewRecipe } from "../../services/EngagementService";
import { isApiError } from "../../types/api/error";
import { useNavigate } from "react-router-dom";

interface RecipeCardSmallProps {
  recipe: Recipe;
}

export default function RecipeCardSmall({ recipe }: RecipeCardSmallProps) {
  const navigate = useNavigate();

  // HANDLERS
  const makeButtonHandler = async () => {
    // Navigate first, so it feels faster
    await navigate(`/v2/web/recipe/${recipe.Id}`);

    const result = await EngagementViewRecipe(recipe.Id);
    if (isApiError(result)) {
      console.error(result.message);
    }
  }

  return (
    <div className="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
      <img className="size-52 md:size-48 rounded-sm border border-gray-200 shadow-sm shadow-gray-100" src={RecipePlaceholder} />
      <div className="w-52 md:w-48 mt-8">
        <h2 className="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
          {recipe.Title}
        </h2>
        <p className="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
          Serves {recipe.Serves}
        </p>
        <div className="flex items-end justify-between">
          <p className="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
            {recipe.Category} - {recipe.Duration.Total} mins
          </p>
          {recipe.Favorite && <LikeButton />}
        </div>
        <button
          onClick={() => void makeButtonHandler()}
          className="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
        >
          Make Now!
        </button>
      </div>
    </div>
  );
}
