"use client";

import styles from "./filter-bar.module.scss";

type Props = {
  searchComponent: React.ReactNode;
  filters: React.ReactNode;
  onApply: () => void;
  onClear: () => void;
};

const FilterBar = ({ searchComponent, filters, onApply, onClear }: Props) => {
  return (
    <div className={styles.filterBar}>
      
      {/* SEARCH */}
      <div className={styles.search}>
        {searchComponent}
      </div>

      {/* FILTERS */}
      <div className={styles.controls}>
        <div className={styles.filters}>
          {filters}
        </div>

        <div className={styles.actions}>
          <button onClick={onApply} className={styles.applyBtn}>
            Apply
          </button>

          <button onClick={onClear} className={styles.clearBtn}>
            Clear
          </button>
        </div>
      </div>
    </div>
  );
};

export default FilterBar;