import { FormGenerator } from '../FormGenerator/FormGenerator';
import { useMitgliederLogic } from './mitgliederLogic';
import { MitgliederTableProps } from './mitgliederTypes';
import { useLanguage } from '../../contexts/LanguageContext';
import styles from './MitgliederTable.module.css';

function MitgliederTable({ className = '' }: MitgliederTableProps) {
  const { t } = useLanguage();
  const {
    users,
    loading,
    error,
    columns,
    actions,
    refetch
  } = useMitgliederLogic();

  if (error) {
    return (
      <div className={styles.errorState}>
        <p>{t('users.error.loading', 'Error loading users:')} {error}</p>
        <button onClick={refetch} className={styles.retryButton}>
          {t('common.retry', 'Retry')}
        </button>
      </div>
    );
  }

  return (
    <div className={`${styles.mitgliederTable} ${className}`}>
      <FormGenerator
        data={users}
        columns={columns}
        title={t('users.title', 'Users')}
        searchable={true}
        filterable={true}
        sortable={true}
        resizable={true}
        pagination={true}
        pageSize={10}
        selectable={false}
        loading={loading}
        actions={actions}
        className={styles.mitgliederFormGenerator}
      />
    </div>
  );
}

export default MitgliederTable;