import { ReactNode } from 'react'

interface TableProps {
    headers: string[]
    rows: (string | ReactNode)[][]
}

export function Table({ headers, rows }: TableProps) {
    const columnCount = headers.length

    return (
        <div className="overflow-x-auto mb-6">
            <table className="w-full text-base border-collapse table-fixed">
                <colgroup>
                    {columnCount === 3 ? (
                        <>
                            <col className="w-1/4" />
                            <col className="w-[15%]" />
                            <col />
                        </>
                    ) : columnCount === 4 ? (
                        <>
                            <col className="w-1/4" />
                            <col className="w-1/6" />
                            <col className="w-1/6" />
                            <col />
                        </>
                    ) : (
                        headers.map((_, i) => <col key={i} />)
                    )}
                </colgroup>
                <thead>
                    <tr>
                        {headers.map((header, i) => (
                            <th
                                key={i}
                                className="text-left font-medium text-base-content border-b border-border px-3 py-2"
                            >
                                {header}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {rows.map((row, i) => (
                        <tr key={i}>
                            {row.map((cell, j) => (
                                <td
                                    key={j}
                                    className={`text-muted border-b border-border px-3 py-2 ${j === 0 ? 'font-mono text-sm break-all' : ''
                                        }`}
                                >
                                    {cell}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}