import { getRecipePlaceholder } from "@/lib/recipe-placeholder";
import { cn } from "@/lib/utils";

/** Gradient + food/drink icon shown in place of a cover photo — deterministic per recipe id, so it stays stable across renders instead of flickering between icons/colors. */
export function RecipeCoverPlaceholder({
  recipe,
  className,
  iconClassName,
}: {
  recipe: { id: string; recipeType?: "dish" | "drink"; coverIcon?: string | null; coverColor?: string | null };
  className?: string;
  iconClassName?: string;
}) {
  const { gradient, Icon } = getRecipePlaceholder(recipe);
  return (
    <div className={cn("w-full h-full flex items-center justify-center bg-muted bg-gradient-to-br", gradient, className)}>
      {/* Solid color, not opacity — an alpha stroke darkens wherever an
          icon's own paths overlap (visible on icons like ChefHat/Croissant),
          reading as an uneven blotch instead of a flat, even tint. */}
      <Icon className={cn("h-10 w-10 text-muted-foreground", iconClassName)} strokeWidth={1.5} />
    </div>
  );
}