---
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-sm text-left">
        <thead class="text-xs border-b-3 border-caperren-green uppercase bg-black">
        <tr>
            {data.header.map(headingText => (
                    <th scope="col" class={paddingClasses}>
                        {headingText}
                    </th>
            ))}
        </tr>
        </thead>
        <tbody>
        {data.rows.map(row => (
                <tr class=" border-b dark:bg-black  border-caperren-green">
                    {row.map(rowColumnText => (
                            <th scope="row"
                                class={paddingClasses + " font-medium  whitespace-nowrap"}>
                                {rowColumnText}
                            </th>
                    ))}
                </tr>
        ))}
        </tbody>
    </table>
</div>