'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface TableToolbarProps {
  /** 左侧：搜索/筛选区 */
  left?: ReactNode;
  /** 右侧：操作按钮区 */
  right?: ReactNode;
  className?: string;
}

/**
 * 标准列表工具条：左侧搜索筛选 + 右侧操作按钮，同一行布局。
 * 左侧搜索区强制不换行（保持一行展示）；
 * 外层保留 flex-wrap，极窄屏时右侧操作按钮可降级到下一行。
 */
export function TableToolbar({ left, right, className }: TableToolbarProps) {
  return (
    <div
      className={cn(
        'mb-4 flex flex-wrap items-center justify-between gap-2',
        className,
      )}
    >
      <div className="flex items-center gap-2 whitespace-nowrap">{left}</div>
      {right && <div className="flex items-center gap-2 whitespace-nowrap">{right}</div>}
    </div>
  );
}