import React from 'react';
import { StyledAnchor, StyledAnchorNavigation, StyledAnchorSection } from './AnchorNavigation.styles';
var Anchor = function Anchor(_ref) {
  var label = _ref.label,
    active = _ref.active,
    onClick = _ref.onClick;
  var handleKeyDown = function handleKeyDown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      onClick();
    }
  };
  return /*#__PURE__*/React.createElement(StyledAnchorSection, {
    $active: active,
    onClick: onClick,
    onKeyDown: handleKeyDown
  }, /*#__PURE__*/React.createElement(StyledAnchor, {
    "aria-current": active,
    $active: active,
    tabIndex: 0
  }, label));
};
export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var sections = _ref2.sections,
    active = _ref2.active,
    setActive = _ref2.setActive;
  return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
    ref: ref
  }, sections.map(function (_ref3) {
    var id = _ref3.id,
      label = _ref3.label;
    return /*#__PURE__*/React.createElement(Anchor, {
      key: id,
      onClick: function onClick() {
        return setActive(id);
      },
      active: active === id,
      label: label
    });
  }));
});
//# sourceMappingURL=AnchorNavigation.js.map