import { DataState } from "@/shared/ui/DataState.jsx";
import { LogTable } from "@/features/logs/components/LogTable.jsx";
import { LogToolbar } from "@/features/logs/components/LogToolbar.jsx";
import { useLogsPage } from "@/features/logs/hooks/useLogsPage.js";

export function LogsPage({ type }) {
    const page = useLogsPage(type);

    return (
        <>
            <LogToolbar canExport={page.abilities.canExport} isLogin={page.isLogin} onExport={page.downloadLogs} />

            <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                <LogTable
                    data={page.data}
                    isLogin={page.isLogin}
                    pagination={{
                        page: page.page,
                        pageSize: page.data.pageSize || 50,
                        total: page.data.total || 0,
                        onPageChange: page.setPage,
                    }}
                    query={page.query}
                    onQueryChange={page.changeQuery}
                />
            </DataState>
        </>
    );
}
