type Row = Record<string, string | number>;

export function TableWidget({ title, columns, rows }: { title?: string; columns: string[]; rows: Row[] }) {
    return (
        <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
            {title && <p className="mb-3 text-sm font-medium text-foreground">{title}</p>}
            <div className="overflow-x-auto">
                <table className="w-full text-sm">
                    <thead className="text-left text-xs text-muted-foreground">
                        <tr>{columns.map((c) => <th key={c} className="pb-2 font-medium">{c}</th>)}</tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                        {rows.map((row, i) => (
                            <tr key={i}>{columns.map((c) => <td key={c} className="py-2 text-foreground">{row[c]}</td>)}</tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}