import React from 'react';
import PropTypes from 'prop-types';
import { Box, Skeleton, ToggleButtonGroup, ToggleButton } from '@mui/material';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Tabs({
  tabs,
  currentTab,
  onTabChange,
  loading = false,
  extra = null
}) {
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      gap: 1,
      alignItems: 'center',
      justifyContent: 'space-between',
      flexWrap: 'wrap'
    },
    children: [loading ? /*#__PURE__*/_jsx(Skeleton, {
      variant: "text",
      width: 300,
      height: 56
    }) : /*#__PURE__*/_jsx(ToggleButtonGroup, {
      color: "primary",
      size: "small",
      value: currentTab,
      exclusive: true,
      onChange: (event, newValue) => {
        if (newValue !== null) {
          onTabChange(newValue);
        }
      },
      disabled: loading,
      children: tabs.map(tab => /*#__PURE__*/_jsx(ToggleButton, {
        size: "small",
        value: tab.value,
        children: tab.label
      }, tab.value))
    }), /*#__PURE__*/_jsx(Box, {
      children: extra
    })]
  });
}
Tabs.propTypes = {
  tabs: PropTypes.array.isRequired,
  currentTab: PropTypes.string.isRequired,
  onTabChange: PropTypes.func.isRequired,
  loading: PropTypes.bool,
  extra: PropTypes.node
};