import * as React from 'react';
import classnames from 'classnames';
import { Icon, Button } from '@zhst/meta';
import './index.less';

const componentName = `zhst-image__nav`;

const Navigation: React.FC<{
  show?: boolean;
  onClick?: React.MouseEventHandler<HTMLElement>;
  prev?: boolean;
  next?: boolean;
  disabled?: boolean;
  className?: string;
  color?: string;
  hoverColor?: string;
}> = (props) => {
  const { show, prev, next, disabled, onClick, className, color } = props;

  return (
    <div
      className={classnames(
        `${componentName}`,
        prev && `${componentName}-prev`,
        next && `${componentName}-next`,
        disabled && `${componentName}--disable`,
        !show && `${componentName}--hide`,
        className
      )}
    >
      <Button type="text" disabled={disabled} onClick={onClick}>
        <Icon size={28} color={color} icon={prev ? 'icon-qiehuanzuo' : 'icon-qiehuanyou'} />
      </Button>
    </div>
  );
};

export default Navigation;