import React from 'react';
import { PHXSkeleton } from '../Skeleton';
import PHXUrlApply from '../Func/PHXUrlApply/PHXUrlApply';
export const PHXReportButtonTab = ({ activeTab, className = '', columns, configUrlApply, loading = false, onChange, tabs, }) => {
    const handleClick = (item) => {
        onChange(item.value);
        if (configUrlApply && item.key) {
            PHXUrlApply(item.key, item.value, item.listKeyReset || [], configUrlApply);
        }
    };
    const containerClass = columns ? `flex gap-4 sm:grid sm:grid-cols-${columns}` : 'flex gap-4';
    return (React.createElement("div", { className: `w-full pb-4 ${className}` },
        React.createElement("div", { className: 'overflow-x-auto' },
            React.createElement("div", { className: containerClass }, tabs.map((item) => (React.createElement("div", { key: item.value, className: 'h-[90px] w-full min-w-[200px]' }, loading ? (React.createElement(PHXSkeleton, { size: 'extra-large', type: 'only-report' })) : (React.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.createElement("p", { className: 'text-left text-[13px] text-gray-600' }, item.name),
                React.createElement("p", { className: 'truncate text-left text-[24px] font-semibold text-black' }, item.count))))))))));
};
//# sourceMappingURL=ReportButton.js.map