import React__default, { useRef, useEffect } from 'react';
import { SegmentWrapper, SegmentLabel } from './styles.js';
import { useHasFocus } from '../../../../hooks/useHasFocus.js';

function Segment({ segment, active, size, segmentPadding, onChange, setActiveRef, }) {
    var _a;
    const ref = useRef(null);
    const { hasFocus } = useHasFocus(ref);
    useEffect(() => {
        if (active)
            setActiveRef(ref);
    }, [active]);
    function handleClick() {
        !segment.disabled && onChange(segment);
    }
    return (React__default.createElement(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.createElement(SegmentLabel, { title: segment.tooltip },
            segment.icon,
            segment.label)));
}

export { Segment };
