import type { ReactNode } from 'react';
import './app-search-bar.css';

// Search / filter toolbar for management list pages. React port of administrator-fe's
// AppSearchBar.vue: a keyword search input on the left, then the active filter tag popovers and the
// "Add filter" dropdown trailing it. A fixed, never-collapsing `gap` keeps the space between the
// search input, the tags, and the Add-filter button consistent — and small (4px), so the button
// sits close to the search input rather than at the opposite edge.
//
//   search        — the keyword <Input> (left region).
//   children      — the filter tag <Popover>s + the "Add filter" <Dropdown> (and any always-on
//                   trailing control, e.g. a status <Select>); they flow in the middle region and wrap.
//   addFilter     — optional: render the Add-filter control in its OWN trailing region instead of as a
//                   child. Only needed together with `pushAddFilter`.
//   gap           — px gap kept between the regions and between the tags (default 4).
//   pushAddFilter — pin the `addFilter` region to the right edge instead of trailing the tags closely.
//   className     — outer classes; defaults to the house `w-100 mb-2` (pass `w-100 mb-1` for a tighter page).
type AppSearchBarProps = {
  search: ReactNode;
  children?: ReactNode;
  addFilter?: ReactNode;
  gap?: number;
  pushAddFilter?: boolean;
  className?: string;
};

const AppSearchBar = ({ search, children, addFilter, gap = 4, pushAddFilter = false, className = 'w-100 mb-2' }: AppSearchBarProps) => (
  <div className={`app-search-bar ${className}`} style={{ gap }}>
    <div className="app-search-bar__search">{search}</div>
    <div className="app-search-bar__filters" style={{ gap }}>
      {children}
    </div>
    {addFilter ? (
      <div className={`app-search-bar__add${pushAddFilter ? ' is-pushed' : ''}`} style={{ gap }}>
        {addFilter}
      </div>
    ) : null}
  </div>
);

export default AppSearchBar;