"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXReportButtonTab = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const Skeleton_1 = require("../Skeleton");
const PHXUrlApply_1 = tslib_1.__importDefault(require("../Func/PHXUrlApply/PHXUrlApply"));
const PHXReportButtonTab = ({ activeTab, className = '', columns, configUrlApply, loading = false, onChange, tabs, }) => {
    const handleClick = (item) => {
        onChange(item.value);
        if (configUrlApply && item.key) {
            (0, PHXUrlApply_1.default)(item.key, item.value, item.listKeyReset || [], configUrlApply);
        }
    };
    const containerClass = columns ? `flex gap-4 sm:grid sm:grid-cols-${columns}` : 'flex gap-4';
    return (react_1.default.createElement("div", { className: `w-full pb-4 ${className}` },
        react_1.default.createElement("div", { className: 'overflow-x-auto' },
            react_1.default.createElement("div", { className: containerClass }, tabs.map((item) => (react_1.default.createElement("div", { key: item.value, className: 'h-[90px] w-full min-w-[200px]' }, loading ? (react_1.default.createElement(Skeleton_1.PHXSkeleton, { size: 'extra-large', type: 'only-report' })) : (react_1.default.createElement("div", { className: `flex h-full w-full cursor-pointer flex-col justify-center rounded-xl
                  px-4 transition-all sm:px-6
                  ${activeTab === item.value ? 'bg-gray-100' : 'bg-white hover:bg-gray-100'}`, onClick: () => handleClick(item), role: 'button' },
                react_1.default.createElement("p", { className: 'text-left text-[13px] text-gray-600' }, item.name),
                react_1.default.createElement("p", { className: 'truncate text-left text-[24px] font-semibold text-black' }, item.count))))))))));
};
exports.PHXReportButtonTab = PHXReportButtonTab;
//# sourceMappingURL=ReportButton.js.map