import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

interface PlatformTableProps<T> {
    data: T[];
    columns: string[];
    renderRow: (item: T) => ReactNode;
    emptyMessage?: string;
    className?: string;
}

function PlatformTable<T>({
    data,
    columns,
    renderRow,
    emptyMessage,
    className = "bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden"
}: PlatformTableProps<T>) {
    const { t } = useTranslation();

    return (
        <div className={className}>
            <div className="overflow-x-auto">
                <table className="w-full text-sm text-left">
                    <thead className="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
                        <tr>
                            {columns.map((col, idx) => (
                                <th key={idx} className={`px-6 py-4 font-medium ${idx === columns.length - 1 ? 'text-right' : ''}`}>
                                    {col}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                        {data.map((item, idx) => (
                            <React.Fragment key={idx}>
                                {renderRow(item)}
                            </React.Fragment>
                        ))}
                    </tbody>
                </table>
            </div>
            {data.length === 0 && (
                <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                    {emptyMessage || t('common.noResults')}
                </div>
            )}
        </div>
    );
}

export default PlatformTable;