import React from 'react';
import classNames from 'classnames';
import { Tab } from './tab';
import { TAB_GROUP_SIZE } from './types';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @midnight-gray-supported
 * @alpine-light-supported
 */
export const Tabs = ({
  options,
  selectedKey,
  isDisabled,
  className,
  testId,
  ariaLabelledBy,
  ariaLabel,
  onSelect,
  accentType,
  groupIdentifier = '',
  size = TAB_GROUP_SIZE.MEDIUM
}) => {
  const ariaAttrs = {
    ...(ariaLabelledBy && !ariaLabel && {
      'aria-labelledby': ariaLabelledBy
    }),
    ...(ariaLabel && !ariaLabelledBy && {
      'aria-label': ariaLabel
    })
  };
  return /*#__PURE__*/_jsx("fieldset", {
    className: classNames('tabgroup tabgroup-container', `${size}${className ? ` ${className}` : ''}`, accentType),
    disabled: isDisabled,
    "test-id": testId,
    ...ariaAttrs,
    children: options.map(option => /*#__PURE__*/_jsx(Tab, {
      option: option,
      onChange: onSelect,
      checked: option.key === selectedKey,
      groupIdentifier: groupIdentifier
    }, option.key))
  });
};