import _JSXStyle from "../styled-jsx.es.js";
import React from 'react';
import klass from './cssClasses'; // Assuming cssClasses.ts is in src/

var Arrow = function Arrow(_ref) {
  var direction = _ref.direction,
    onClickHandler = _ref.onClickHandler,
    enabled = _ref.enabled,
    label = _ref.label;
  var isPrev = direction === 'prev';
  var arrowClassName = isPrev ? klass.ARROW_PREV(!enabled) : klass.ARROW_NEXT(!enabled);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-label": label,
    onClick: onClickHandler,
    className: "jsx-4058608807" + " " + (arrowClassName || "")
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4058608807"
  }, ".control-arrow.jsx-4058608807{position:absolute;z-index:2;top:0;bottom:0;background:none;border:0;font-size:26px;cursor:pointer;opacity:0.4;-webkit-transition:all 0.25s ease-in;transition:all 0.25s ease-in;margin-top:-13px;padding:5px;color:#fff;}.control-arrow.jsx-4058608807:hover{background:rgba(0,0,0,0.2);opacity:1;}.control-arrow.jsx-4058608807:hover,.control-arrow.jsx-4058608807:focus{opacity:1;}.control-arrow.control-arrow.jsx-4058608807:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:'';}.control-arrow.control-disabled.jsx-4058608807{opacity:0;cursor:inherit;display:none;}.control-arrow.control-prev.jsx-4058608807{left:0;}.control-arrow.control-prev.jsx-4058608807:before{border-right:8px solid #fff;}.control-arrow.control-next.jsx-4058608807{right:0;}.control-arrow.control-next.jsx-4058608807:before{border-left:8px solid #fff;}"));
};
export default Arrow;