import React from 'react';
import { Tooltip } from '../tooltip';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const Tab = ({
  option,
  onChange = () => {},
  groupIdentifier = '',
  checked = false
}) => {
  const {
    key,
    testId,
    label,
    labelClassName = '',
    inputClassName = 'tabgroup-tab',
    isDisabled,
    tooltip,
    icon
  } = option;
  const itemId = [groupIdentifier, option.key].filter(Boolean).join('-');
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx("input", {
      type: "radio",
      className: inputClassName,
      id: itemId,
      tabIndex: checked ? 0 : -1 // only the selected tab should be focusable (not the first/last one when moving with the keyboard)
      ,
      checked: checked,
      value: key,
      onChange: () => onChange(option),
      disabled: isDisabled,
      "test-id": testId
    }, key), /*#__PURE__*/_jsx(Tooltip, {
      content: tooltip,
      children: /*#__PURE__*/_jsxs("label", {
        htmlFor: itemId,
        className: labelClassName,
        "test-id": `${testId}-label`,
        children: [icon && /*#__PURE__*/_jsx(FontAwesomeIcon, {
          className: "tabgroup-icon",
          icon: icon
        }), label]
      }, "tabgroup-label")
    })]
  });
};