"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { Heart } from "lucide-react";
import { FavoriteRecipeCard, type FavoriteRecipe } from "@/components/recipe/favorite-recipe-card";
import { EmptyState } from "@/components/shared/empty-state";

export function FavoritesGrid({
  initialRecipes,
  emptyTitle,
  emptyDescription,
}: {
  initialRecipes: FavoriteRecipe[];
  emptyTitle: string;
  emptyDescription: string;
}) {
  const t = useTranslations("recipes");
  const [recipes, setRecipes] = useState(initialRecipes);

  function handleUnfavorited(recipeId: string) {
    setRecipes((prev) => prev.filter((r) => r.id !== recipeId));
  }

  if (recipes.length === 0) {
    return <EmptyState icon={Heart} title={emptyTitle} description={emptyDescription} action={{ label: t("exploreRecipes"), href: "/explore" }} />;
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 items-start">
      {recipes.map((recipe) => (
        <FavoriteRecipeCard key={recipe.id} recipe={recipe} onUnfavorited={handleUnfavorited} />
      ))}
    </div>
  );
}