import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";

type IngredientGroupDisplayListItemProps = {
    groupModel: IngredientGroupModel,
    index: number,
}

export default function IngredientGroupDisplayListItem({groupModel, index}: IngredientGroupDisplayListItemProps) {
    return (<div key={index}>
        {/* the title is optional, only print if present */}
        {groupModel.title && groupModel.title.trim() !== "" && (
            <h3 className="highlight-container-bg mb-2">{groupModel.title}</h3>
        )}
        <ul>
            {groupModel.ingredientList.map((ing, j) => (
                <li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
                    {ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
                </li>
            ))}
        </ul>
    </div>);
}