import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

export type ListToolbarProps = {
  /** 左侧筛选区(通常是 FilterPills) */
  filters?: ReactNode;
  /** 右侧搜索区(通常是 SearchInput) */
  search?: ReactNode;
  className?: string;
};

/** 列表页工具栏布局:左筛选 / 右搜索,移动端纵向堆叠 */
export function ListToolbar({ filters, search, className }: ListToolbarProps) {
  return (
    <div
      className={cn(
        "mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
        className,
      )}
    >
      {filters}
      {search}
    </div>
  );
}