"use client";

import { useState } from "react";
import { Heart } from "lucide-react";
import { FavoriteRecipeCard, type FavoriteRecipe } from "@/components/recipe/favorite-recipe-card";

export function FavoritesGrid({
  initialRecipes,
  emptyLabel,
}: {
  initialRecipes: FavoriteRecipe[];
  emptyLabel: string;
}) {
  const [recipes, setRecipes] = useState(initialRecipes);

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

  if (recipes.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
        <Heart className="h-12 w-12 text-muted-foreground/40" />
        <p className="text-muted-foreground text-sm text-center max-w-xs">{emptyLabel}</p>
      </div>
    );
  }

  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>
  );
}