import React, { useState } from "react";
import PropTypes from "prop-types";
import { ToggleButtonGroup, ToggleButton } from "@mui/material";
import { Tooltip } from "@mui/material";

const NavigationButtons = ({ tabs, onTabChange }) => {
  const [selected, setSelected] = useState(tabs[0].code);

  const handleTabSelection = (_event, tabCode) => {
    setSelected(tabCode);
    onTabChange && onTabChange(tabCode);
  };

  return (
    <ToggleButtonGroup size="small" value={selected} exclusive onChange={handleTabSelection}>
      {tabs.map(tab => (
        <ToggleButton key={tab.code} value={tab.code} aria-label="navigation buttons" disabled={selected === tab.code}>
          <Tooltip title={tab.tooltip}>
            <tab.icon color="primary" />
          </Tooltip>
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
};

NavigationButtons.propTypes = {
  tabs: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired })).isRequired,
  onTabChange: PropTypes.func
};

export default NavigationButtons;
