import React from "react";

export type TableHeaderConfig<Row> = {
    title: string | React.ReactElement,
    key: string,
    render?: (row: Row, value: any) => string | React.ReactElement,
}

export default function BaseTable<T>(props: { configs: TableHeaderConfig<T>[], rows?: any[] }) {
    const {configs, rows} = props;

    return <><table className="border-collapse">
        <thead>
        <tr>
            {
                configs.map((config, i) => {
                    return <th key={i} className="border border-slate-300 border-solid px-2 py-1 whitespace-nowrap">{config.title}</th>
                })
            }
        </tr>
        </thead>
        {
            rows && rows.length > 0 && <tbody>
                {
                    rows.map((row, i) => {
                        return <tr key={i}>
                            {
                                configs.map((config, i) => {
                                    const {key, render} = config
                                    let node = render != null ? render(row, row[key]) : row[key]
                                    return <td key={i} className="border border-slate-300 border-solid px-2 py-1 whitespace-nowrap text-center">
                                        {
                                            node
                                        }
                                    </td>
                                })
                            }
                        </tr>
                    })
                }
            </tbody> || null
        }
    </table>
    </>
}