import { Button } from '../button/button.spec';
import { ButtonGroup } from '../button-group/button-group.spec';
import { classNames } from '../misc';

export const ZOOMCONTROL_CLASSNAME = `k-zoom-control`;

const states = [];

const options = {};

const defaultOptions = {};

export const ZoomControl = (
    props: React.HTMLAttributes<HTMLDivElement>
) => {
    const {
        ...other
    } = props;

    return (
        <ButtonGroup
            {...other}
            className={classNames(
                props.className,
                "k-group-horizontal",
                ZOOMCONTROL_CLASSNAME
            )}
        >
            <Button icon="plus" className="k-zoom-in" aria-label="Zoom in"></Button>
            <Button icon="minus" className="k-zoom-out" aria-label="Zoom out"></Button>
        </ButtonGroup>
    );
};

ZoomControl.states = states;
ZoomControl.options = options;
ZoomControl.className = ZOOMCONTROL_CLASSNAME;
ZoomControl.defaultOptions = defaultOptions;

export default ZoomControl;