export type MenuIngredient = {
  id: string;
  name: string;
};

export function WaffleIngredientList({
  items,
}: {
  items: MenuIngredient[];
}) {
  if (!items.length) return null;

  return (
    <ul className="mt-1.5 flex flex-wrap gap-1">
      {items.map((ing) => (
        <li
          key={ing.id}
          className="inline-flex items-center rounded-full border border-chocolat/10 bg-cream/60 px-2 py-0.5 text-xs font-medium leading-tight text-chocolat"
        >
          {ing.name}
        </li>
      ))}
    </ul>
  );
}
