// packages/core/src/components/data-table/data-table-header.tsx
import type { JSX } from "solid-js";
import { For } from "solid-js";
import { useInternalDataTableContext } from "./data-table-context";
import { DataTableHeaderCell } from "./data-table-header-cell";

/**
 * Renders the `<thead>` element, auto-generating one `<th>` per column
 * using the column definitions from context.
 */
export function DataTableHeader(): JSX.Element {
  const ctx = useInternalDataTableContext();

  return (
    <thead>
      <tr>
        <For each={ctx.columns()}>
          {(col) => (
            <DataTableHeaderCell columnId={col.id} header={col.header} sortable={col.sortable} />
          )}
        </For>
      </tr>
    </thead>
  );
}
