// components/Table.js
import { Tag, For } from "sigpro";

export const Table = (props, children) => {
  children === undefined && (children = props, props = {});
  return Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
};

export const Rows = (props) => {
  const itemArray = typeof props.items === "function" ? props.items() : (props.items || []);
  
  const thead = props.header !== false && props.columns?.some(col => col.label) ? 
    Tag("thead", {}, 
      Tag("tr", {}, 
        props.columns.map(col => Tag("th", { class: col.class }, col.label))
      )
    ) : null;
  
  const tbody = Tag("tbody", {}, [
    For(itemArray, (item, idx) => 
      Tag("tr", {}, 
        props.columns.map(col => {
          const content = col.render ? col.render(item, idx) : item[col.key];
          return Tag("td", { class: col.class }, content);
        })
      )
    , props.keyFn || ((item, idx) => item.id ?? idx))
  ]);
  
  return [thead, tbody];
};