import type { Ingredient, Ingredients } from "../lib/recipes.ts";

type IngredientsProps = {
  ingredients: Ingredients;
};

function formatIngredient(ingredient: Ingredient) {
  return `${
    ingredient.amount && ingredient.unit &&
    ` - ${ingredient.amount} ${ingredient.unit}`
  } ${ingredient.type}`;
}

export const IngredientsList = ({ ingredients }: IngredientsProps) => {
  return (
    <div>
      {ingredients.map((item, index) => (
        <div key={index} class="mb-4">
          {"type" in item && formatIngredient(item)}
          {"ingredients" in item && Array.isArray(item.ingredients) && (
            <ul class="pl-4 list-disc">
              {item.ingredients.map((ingredient, idx) => (
                <li key={idx}>
                  {formatIngredient(ingredient)}
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
};