'use client';

import type { HTMLAttributes } from 'react';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { LazyDataTable } from '@/components/lazy';
import { TableScrollWrapper } from '@/components/tables/TableScrollWrapper';
import type { PaginatedResponse } from '@/types';
import type { BuildListingMobileViewOptions } from '@/components/listings/mobile/buildListingMobileView';

type FeiraListTableSectionProps<T> = {
    rowKey?: string;
    columns: ColumnsType<T>;
    paginatedData: PaginatedResponse<T>;
    loading: boolean;
    fetching: boolean;
    rowSelection?: TableProps<T>['rowSelection'];
    onChange: TableProps<T>['onChange'];
    onPageChange: (page: number, pageSize?: number) => void;
    onRow?: (record: T) => HTMLAttributes<HTMLElement>;
    rowClassName?: TableProps<T>['rowClassName'];
    /** Config opcional para cards mobile (menu, título, opções). Sem isto, auto-cards ≥3 colunas. */
    autoMobileFromColumns?: Omit<BuildListingMobileViewOptions<T>, 'columns'>;
};

/** Seção de tabela paginada partilhada pelas listagens da feira. */
export function FeiraListTableSection<T>({
    rowKey = 'id',
    columns,
    paginatedData,
    loading,
    fetching,
    rowSelection,
    onChange,
    onPageChange,
    onRow,
    rowClassName,
    autoMobileFromColumns,
}: FeiraListTableSectionProps<T>) {
    return (
        <TableScrollWrapper>
            <LazyDataTable
                rowKey={rowKey}
                columns={columns}
                paginatedData={paginatedData}
                loading={loading}
                fetching={fetching}
                showRefresh={false}
                scroll={{ x: 'max-content' }}
                rowSelection={rowSelection}
                onChange={onChange}
                onPageChange={onPageChange}
                onRow={onRow}
                rowClassName={rowClassName}
                autoMobileFromColumns={autoMobileFromColumns}
            />
        </TableScrollWrapper>
    );
}