export const compactFilterLabelClass =
  'block font-medium text-gray-700 dark:text-gray-300 text-[10px] mb-0.5';

export const compactFilterInputClass =
  'w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-emerald-500 disabled:bg-gray-100 dark:disabled:bg-gray-700';

export const compactFilterFieldWrapClass = 'relative w-full mb-2';

export const compactToolbarBtnBaseClass =
  'inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium disabled:opacity-50 disabled:cursor-not-allowed';

export const compactToolbarBtnPrimary = (color: 'cyan' | 'purple' | 'emerald' = 'cyan') => {
  const colors = {
    cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
    purple: 'bg-purple-600 hover:bg-purple-700 text-white',
    emerald: 'bg-emerald-600 hover:bg-emerald-700 text-white',
  };
  return `${compactToolbarBtnBaseClass} ${colors[color]} disabled:opacity-60`;
};

export const compactToolbarBtnSecondary = `${compactToolbarBtnBaseClass} border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800`;

export const compactSummaryCardClass = 'rounded-lg border px-3 py-2';

export const compactSummaryLabelClass = 'text-[10px] text-gray-500 dark:text-gray-400';

export const compactSummaryValueClass = 'text-lg font-semibold text-gray-900 dark:text-white';
