import { $html, $if, $for } from "sigpro";
import { joinClass, val } from "../core/utils.js";

/** LIST */
export const List = (props) => {
  const { 
    items, 
    header, 
    render, 
    keyFn = (item, index) => index,
    class: className, 
    ...rest 
  } = props;

  const listItems = $for(
    items, 
    (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), 
    keyFn
  );

  return $html(
    "ul",
    {
      ...rest,
      class: joinClass("list bg-base-100 rounded-box shadow-md", className),
    },
    header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems
  );
};