import { PageLayout } from "../comp/page_layout.ts";
import { AnyNode, E } from "ren/node.ts";
import { classNames } from "ren/attrs.ts";
import { Context } from "../context.ts";
import { H3 } from "../uikit/typo.ts";
import { Ingredient } from "../domain/ingredient/types.ts";

interface IngredientsPageData {
  ingredients: Ingredient[];
}

export function IngredientsPage(
  ctx: Context,
  data: IngredientsPageData,
): AnyNode {
  return PageLayout(ctx, [
    E("div", classNames("content-width"), [
      H3("Ингредиенты"),
      IngredientList(data.ingredients),
    ]),
  ]);
}

export function IngredientList(ingrs: Ingredient[]): AnyNode {
  return E("div", classNames("responsive-typography"), [
    E("ul", classNames("gap-v-1x5"), ingrs.map(IngredientItem)),
  ]);
}

export function IngredientItem(ingr: Ingredient): AnyNode {
  return E("li", [], [
    ingr.name,
    // E("a", { href: `/ingredients/${ingr.key}` }, ingr.name),
  ]);
}