import React, { useState } from "react";
import { Pagination, Switch } from "@tencent/tea-component";

export default function PaginationExample() {
  const s1 = useSwitch();
  const s2 = useSwitch();
  const s3 = useSwitch();
  const s4 = useSwitch();
  const s5 = useSwitch();

  return (
    <>
      <Pagination
        recordCount={1000}
        stateTextVisible={s1.value}
        pageSizeVisible={s2.value}
        pageIndexVisible={s3.value}
        jumpVisible={s4.value}
        endJumpVisible={s5.value}
      />
      <hr />
      <p>
        <Switch {...s1}>显示状态</Switch>
        <Switch {...s2}>显示页长</Switch>
        <Switch {...s3}>显示页码</Switch>
        <Switch {...s4}>显示翻页</Switch>
        <Switch {...s5}>显示头尾</Switch>
      </p>
    </>
  );
}

function useSwitch(defaultChecked = true) {
  const [value, onChange] = useState(defaultChecked);
  return { value, onChange: value => onChange(value) };
}