'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styles = require('./styles.js');
var useHasFocus = require('../../../../hooks/useHasFocus.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function Segment({ segment, active, size, segmentPadding, onChange, setActiveRef, }) {
    var _a;
    const ref = React.useRef(null);
    const { hasFocus } = useHasFocus.useHasFocus(ref);
    React.useEffect(() => {
        if (active)
            setActiveRef(ref);
    }, [active]);
    function handleClick() {
        !segment.disabled && onChange(segment);
    }
    return (React__default['default'].createElement(styles.SegmentWrapper, { ref: ref, "aria-selected": active, role: "tab", key: (_a = segment.id) !== null && _a !== void 0 ? _a : segment.label, isActive: active, size: size, segmentPadding: segmentPadding, hasFocus: hasFocus, disabled: segment.disabled, onClick: handleClick },
        React__default['default'].createElement(styles.SegmentLabel, { title: segment.tooltip },
            segment.icon,
            segment.label)));
}

exports.Segment = Segment;
