import { clsx } from 'clsx';
import { forwardRef, useRef, useEffect } from 'react';
import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
import { jsx } from 'react/jsx-runtime';

const noop = () => {};
const Tab = /*#__PURE__*/forwardRef(function Tab({
  children,
  id,
  disabled,
  panelId,
  selected,
  onKeyDown,
  onClick,
  style,
  focusTab = noop
}, reference) {
  const handleFocusTab = useEffectEvent(focusTab);
  const firstUpdate = useRef(true);
  useEffect(function checkFocus() {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }
    if (selected) {
      handleFocusTab();
    }
  }, [handleFocusTab, selected]);
  return /*#__PURE__*/jsx("li", {
    ref: reference,
    className: clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
      'tabs__tab--selected': selected,
      clickable: !disabled,
      disabled
    }),
    role: "tab",
    id: id,
    "aria-selected": selected ? 'true' : 'false',
    "aria-disabled": disabled ? 'true' : 'false',
    "aria-controls": disabled ? undefined : panelId,
    tabIndex: 0,
    style: style,
    onKeyDown: disabled ? undefined : onKeyDown,
    onClick: onClick,
    children: /*#__PURE__*/jsx("span", {
      className: "tabs__tab__content",
      children: children
    })
  });
});

export { Tab as default };
//# sourceMappingURL=Tab.mjs.map
