import { useParams } from 'react-router-dom';
import {useApiDocumentation} from "../../API/hooks.ts";

export function DataPage() {
    const { applicationName, endpointName } = useParams<{ applicationName: string; endpointName: string }>();

    const {schema} = useApiDocumentation(applicationName || "", endpointName || "");

    console.log(schema)

    const handleExport = () => {
        // Пока пусто
    };

    const handleAdd = () => {
        // Пока пусто
    };

    const handleFilters = () => {
        // Пока пусто
    };

    return (
        <div className="data-page">
            <div className="buttons-container">
                <button className="export-excel-button" onClick={handleExport}>Экспорт в Excel</button>
                <button className="add-button" onClick={handleAdd}>Добавление</button>
                <button className="filters-button" onClick={handleFilters}>Фильтры</button>
            </div>
            <div className="table-container">
                <table className="data-table" style={{ overflowX: 'auto', display: 'block' }}>
                    <thead>
                    <tr>
                        <th className="column-header">Header 1</th>
                        <th className="column-header">Header 2</th>
                        <th className="column-header">Header 3</th>
                        <th className="column-header">Header 4</th>
                    </tr>
                    </thead>
                    <tbody>
                    {/* Тут могут быть строки данных */}
                    </tbody>
                </table>
            </div>
        </div>
    );
}