---
import { type DesktopTableClassses } from "./DesktopTableClassses"
import { sharedTableRowClasses } from "./sharedTableRowClasses"
// import { t4table } from "~ui/ui_tables/table3/t4table"
import { classMerge } from "~ui/utils/classMerge"
import { type TableColumnDef } from "./TableColumnDef"

interface Props {
  rows: string[]
  noEntriesText?: string
  columns: TableColumnDef[]
  desktopClasses?: DesktopTableClassses
  class?: string
}
const props = Astro.props
const rows = props.rows
const columns = props.columns
const c = props.desktopClasses
const noEntries = rows.length <= 0
const hasEntries = rows.length > 0
const noEntriesText = props.noEntriesText ?? "No Entries"
---

{
  noEntries && (
    <>
      <span class={"text-lg text-center p-2 pt-6"}>{noEntriesText}</span>
    </>
  )
}

{
  hasEntries && (
    <table class={classMerge("overflow-x-auto", props.class, c?.class)}>
      <thead>
        <tr>
          {columns.map((h: TableColumnDef, i: number) => (
            <th scope="col" class={classMerge("text-left", "px-4 py-2", c?.header, h.classHeader)} title={h.title}>
              {h.name}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((d: any, y: number) => (
          <tr class={classMerge(sharedTableRowClasses, c?.row)}>
            {columns.map((h: any) => {
              return <td class={classMerge(c?.data, h.classData)}>{h.cell(d)}</td>
            })}
          </tr>
        ))}
      </tbody>
    </table>
  )
}