import { jsx as _jsx } from "react/jsx-runtime";
import { css } from 'styled-components';
import { StatusCode } from '@redocly/theme/components/StatusCode/StatusCode';
import { styled } from '../../styled-components.js';
export function Tabs({ tabs, onChange, activeTab }) {
    return (_jsx(TabList, { children: tabs.map((tab) => (_jsx(Tab, { "$active": tab.key === activeTab?.key, onClick: () => onChange(tab), children: _jsx(StatusCode, { status: tab.key, children: tab.title }) }, tab.key))) }));
}
const TabList = styled.ol `
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
`;
const Tab = styled.li `
  display: inline-flex;
  align-items: center;
  list-style: none;

  padding: 0 var(--spacing-sm);
  background-color: transparent;
  height: 24px;
  border-radius: var(--border-radius);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);

  &,
  button {
    color: var(--text-color-secondary);

    ${({ $active }) => $active
    ? css `
            color: var(--text-color-primary);
            background-color: var(--tab-bg-color-filled);
          `
    : css `
            &:hover {
              color: var(--text-color-primary);
            }
          `}
  }
`;
//# sourceMappingURL=Tabs.js.map