"use client";

interface FilterBarProps {
  children: React.ReactNode;
  hasActiveFilters?: boolean;
  onClearFilters?: () => void;
}

export function FilterBar({ children, hasActiveFilters, onClearFilters }: FilterBarProps) {
  return (
    <div className="app-toolbar mb-4 flex flex-wrap items-center gap-3">
      {children}
      {hasActiveFilters && onClearFilters && (
        <button
          type="button"
          onClick={onClearFilters}
          className="rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-400 hover:bg-gray-50 hover:text-gray-900 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
        >
          Clear filters
        </button>
      )}
    </div>
  );
}
