import React, { useMemo } from 'react';
import pick from '../../../utils/operators/pick';
import Text from '../../../Text';
import { classes, st } from '../../Tabs.st.css.js';
const TabItem = ({ item, onItemClick, isActive, dynamicProperties, size, type, alignment, width, itemMaxWidth, scrollOnOverflow, ...restProps }) => {
    const { minWidth, maxWidth } = item;
    const itemStyle = useMemo(() => {
        let inlineStyle = {};
        if (type === 'uniformSide' && width) {
            inlineStyle = { width };
        }
        else if (type === 'compactSide' && itemMaxWidth) {
            inlineStyle = { maxWidth: `${itemMaxWidth}pt` };
        }
        if (minWidth) {
            inlineStyle.minWidth = minWidth;
        }
        if (maxWidth) {
            inlineStyle.maxWidth = maxWidth;
        }
        return inlineStyle;
    }, [type, width, itemMaxWidth, minWidth, maxWidth]);
    const handleKeyDown = (e) => {
        if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
            e.preventDefault();
            onItemClick?.(item);
        }
    };
    return (React.createElement("button", { role: "tab", type: "button", "aria-selected": isActive, "data-active": isActive, "data-hook": item.dataHook, key: item.id, onClick: onItemClick ? () => onItemClick(item) : undefined, style: itemStyle, ...pick(restProps, dynamicProperties), className: st(classes.tab, { size, active: isActive, type, alignment }), onKeyDown: handleKeyDown },
        item.prefix && React.createElement("div", { className: st(classes.affix) }, item.prefix),
        React.createElement(Text, { size: size, className: classes.tabText, weight: "thin", ellipsis: !scrollOnOverflow }, item.title),
        item.suffix && React.createElement("div", { className: st(classes.affix) }, item.suffix)));
};
export default TabItem;
//# sourceMappingURL=TabItem.js.map