"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXSegmentTab = PHXSegmentTab;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
function PHXSegmentTab({ tabs }) {
    return (react_1.default.createElement("div", { className: 'w-full flex overflow-x-auto' }, tabs.map((item, index) => (react_1.default.createElement("button", { key: index, className: (0, types_1.classNames)('w-full border-b border-r border-t border-gray-300 bg-white px-4 hover:bg-gray-200 min-w-[100px]', index === 0 && 'rounded-l-lg border-l', index === tabs.length - 1 && 'rounded-r-lg', item.active && '!border-b-gray-200 !bg-gray-100 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] !ring-0'), onClick: () => {
            if (item.onClick) {
                item.onClick();
            }
        } },
        react_1.default.createElement("span", { className: 'my-2 text-xs text-gray-600' }, item.title),
        react_1.default.createElement("p", { className: 'mb-1 text-sm font-medium' }, item.content))))));
}
//# sourceMappingURL=SegmentTab.js.map