import React, { forwardRef } from 'react';
import { StyledHiddenBoldTextWidthFix } from './partials/StyledHiddenBoldTextWidthFix';
import { StyledTabItem } from '../TabBase/partials/StyledTabItem';
import { StyledTab } from '../TabBase/partials/StyledTab';
export var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var tabId = _ref.tabId,
    children = _ref.children,
    isActive = _ref.isActive,
    isFullWidth = _ref.isFullWidth,
    isScrollable = _ref.isScrollable,
    onClick = _ref.onClick,
    onKeyDown = _ref.onKeyDown;
  var handleClick = function handleClick(e) {
    e.preventDefault();
    onClick(e);
  };
  return /*#__PURE__*/React.createElement(StyledTabItem, {
    $isFullWidth: isFullWidth,
    $isScrollable: isScrollable,
    ref: ref,
    role: "presentation"
  }, /*#__PURE__*/React.createElement(StyledTab, {
    $isActive: isActive,
    $isScrollable: isScrollable,
    id: "tab-button-".concat(tabId),
    role: "tab",
    "aria-controls": "tab-content-".concat(tabId),
    "aria-selected": !!isActive,
    onKeyDown: onKeyDown,
    tabIndex: !isActive ? -1 : 0,
    onClick: handleClick
  }, /*#__PURE__*/React.createElement("div", {
    role: "presentation"
  }, children), /*#__PURE__*/React.createElement(StyledHiddenBoldTextWidthFix, {
    "aria-hidden": true
  }, children)));
});