---
import type { tableData } from "@interfaces/table.ts";

const data: tableData = Astro.props.data;
const columnPadding: number = data.columnPadding || 2;
const rowPadding: number = data.columnPadding || 2;
const paddingClasses: string = `px-${columnPadding} py-${rowPadding}`;
---

<div class="relative max-w-full overflow-x-auto">
  <table class="text-left text-sm">
    <thead class="border-caperren-green border-b-3 bg-black text-xs uppercase">
      <tr>
        {
          data.header.map((headingText) => (
            <th scope="col" class={paddingClasses}>
              {headingText}
            </th>
          ))
        }
      </tr>
    </thead>
    <tbody>
      {
        data.rows.map((row) => (
          <tr class="border-caperren-green border-b dark:bg-black">
            {row.map((rowColumnText) => (
              <th
                scope="row"
                class={paddingClasses + " font-medium whitespace-nowrap"}
              >
                {rowColumnText}
              </th>
            ))}
          </tr>
        ))
      }
    </tbody>
  </table>
</div>