// components/List.js
// import { Tag, If, For } from "../sigpro.js";
import { ui, val } from "../core/utils.js";

/**
 * List component
 * 
 * daisyUI classes used:
 * - list, list-row, list-bullet, list-image, list-none
 * - bg-base-100, rounded-box, shadow-md
 * - p-4, pb-2, text-xs, opacity-60
 * - flex, items-center, gap-2
 */
export const List = (props) => {
  const { class: className, items, header, render = (item) => item, keyFn = (item, index) => item.id ?? index, ...rest } = props;

  const listItems = For(
    items,
    (item, index) => Tag("li", { 
      class: "list-row", 
      style: "width: 100%; display: block;" 
    }, [
      Tag("div", { style: "width: 100%;" }, [render(item, index)])
    ]),
    keyFn
  );

  return Tag("ul", {
    ...rest,
    style: "display: block; width: 100%;",
    class: ui('list bg-base-100 rounded-box shadow-md', className),
  }, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
};