import React from 'react';

import Icon from '../Icon';
import Pagination from '../Pagination';
import SelectBox from '../SelectBox';
import Divider from '../Divider';

import { Wrapper } from './styled';

const options = [
  {
    key: '50',
    content: '50 %',
    value: 50,
  },
  {
    key: '100',
    content: '100 %',
    value: 100,
  },
  {
    key: '150',
    content: '150 %',
    value: 150,
  },
  {
    key: '200',
    content: '200 %',
    value: 200,
  },
  {
    key: '250',
    content: '250 %',
    value: 250,
  },
];

const Toolbar = () => {
  return (
    <Wrapper>
      <Pagination total={10} onChange={() => {}} />
      <Divider />
      <Icon glyph="hand" style={{width: '30px'}} />
      <Icon glyph="zoom-in" style={{width: '30px'}} />
      <Icon glyph="zoom-out" style={{width: '30px'}} />
      <SelectBox options={options} width="94px" useInput isDivide />
      <Divider />
      <Icon glyph="rotate-left" style={{width: '30px'}} />
      <Icon glyph="rotate-right" style={{width: '30px'}} />
    </Wrapper>
  );
};

export default Toolbar;
