import * as React from 'react';

import classNames from 'classnames/bind';
import ListSVG from 'assets/svg/viewlist.svg';
import BoxSVG from 'assets/svg/viewbox.svg';

import s from './ViewToggle.module.scss';

const cn = classNames.bind(s);

interface IViewToggleProps {
  className?: string;
  onClick?(): any;
  view: string;
  posRight?: boolean;
}

export default class ViewToggle extends React.Component<IViewToggleProps> {
  render() {
    const { className, onClick, view, posRight } = this.props;

    return (
      <div className={`${cn(s.viewToggle, { posRight })} ${className}`}>
        <button
          className={cn(s.viewToggle__button, 'list', { selected: view === 'list' })}
          onClick={onClick}
        >
          <ListSVG className={s.viewToggle__svg} />
        </button>
        <button
          className={cn(s.viewToggle__button, 'box', { selected: view === 'box' })}
          onClick={onClick}
        >
          <BoxSVG className={s.viewToggle__svg} />
        </button>
      </div>
    );
  }
}