import { createElement, render, useState } from 'rax';
import DriverUniversal from 'driver-universal';
import { Pagination } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const PaginationDemo = () => {
  const [currnet, setCurrent] = useState(1);

  const handleFirstChange = (page) => {
    setCurrent(page);
  };

  return (
    <View>
      <Text className="demo-title">Small</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} size="small" onChange={handleFirstChange} />
      </View>
      <Text className="demo-title">Medium</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} size="medium" onChange={handleFirstChange} />
      </View>
      <Text className="demo-title">Large</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} size="large" onChange={handleFirstChange} />
      </View>
      <Text className="demo-title">Mini-Small</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} type="mini" size="small" onChange={handleFirstChange} />
      </View>
      <Text className="demo-title">Mini-Medium</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} type="mini" size="medium" onChange={handleFirstChange} />
      </View>
      <Text className="demo-title">Mini-Large</Text>
      <View className="demo-content">
        <Pagination current={currnet} total={10} type="mini" size="large" onChange={handleFirstChange} />
      </View>
    </View>
  );
};

// render(<PaginationDemo />, null, { driver: DriverUniversal });
 export default PaginationDemo