import type { ReactNode } from 'react'

export type TableColumn<T extends Record<string, string>> = {
    label: string
    key: keyof T
    render?: (value: T[keyof T], record: T, index: number) => ReactNode
}

type BorderlessTableProps<T extends Record<string, string>> = {
    columns: TableColumn<T>[]
    dataSource: T[]
}

function BorderlessTable<T extends Record<string, string>>({
    columns,
    dataSource,
}: BorderlessTableProps<T>) {
    return (
        <div className="overflow-x-auto rounded-[12px] bg-[#08070E]/55 p-[10px]">
            <table className="w-full min-w-[960px] table-fixed border-collapse text-left text-[14px] text-white">
                <thead>
                    <tr className="bg-linear-to-r from-[#F96C02] to-[#FE9F00] text-white">
                        {columns.map((column) => (
                            <th
                                key={String(column.key)}
                                className="px-[16px] py-[14px] text-[13px] font-bold first:rounded-l-[10px] last:rounded-r-[10px]"
                            >
                                {column.label}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {dataSource.map((record, index) => (
                        <tr
                            key={`${record.name}-${index}`}
                            className="bg-white/4 transition-colors hover:bg-white/8"
                        >
                            {columns.map((column) => {
                                const value = record[column.key]

                                return (
                                    <td
                                        key={String(column.key)}
                                        className="px-[16px] py-[16px] align-top text-[13px] text-white/90"
                                    >
                                        {column.render ? column.render(value, record, index) : value}
                                    </td>
                                )
                            })}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

export default BorderlessTable
