import React, { useState, useCallback } from "react";
import { Card, Row, Col, Radio, Spin, Layout } from "@ttk/component";
import { useActions, useData, useCommit } from "@ttk/app-loader";
import Pagination from "./components/Pagination";
import PageHeader from "./components/PageHeader";
import TableArea from "./components/TableArea";
export default function TabsPage(props) {
  const commit = useCommit();
  const actions = useActions(props);

  return (
    <Card className="ttk-card-form" bordered={false}>
      <Spin spinning={false} delay={50}>
        <Layout className="content">
          <Card bordered={true} style={{ marginBottom: 10 }}>
            <Row style={{ margin: "10px 0", padding: "0 10px" }}>
              <PageHeader {...props} />
            </Row>
            <Row style={{ marginBottom: 10, minHeight: 250 }}>
              <TableArea {...props} />
            </Row>
          </Card>
          <Row>
            <Pagination {...props} />
          </Row>
        </Layout>
      </Spin>
    </Card>
  );
}
