"use client";

import { Button } from "@/components/ui/button/button";

import type {
  AdvancedListFiltersProps,
  FilterItem,
} from "./components/advanced-list-filters/advanced-list-filters";
import AdvancedListFilters from "./components/advanced-list-filters/advanced-list-filters";

interface AdvancedListProps<T extends { key: string }, F extends FilterItem> {
  data: T[];
  renderItem: (item: T, index: number, data: T[]) => React.ReactNode;
  isLoading?: boolean;
  onLoadMore?: () => void;
  filterProps: AdvancedListFiltersProps<F>;
}

const AdvancedList = <T extends { key: string }, F extends FilterItem>(
  props: AdvancedListProps<T, F>,
) => {
  return (
    <div>
      <div className="flex">
        <div className="basis-[300px]">
          <div>
            <AdvancedListFilters {...props.filterProps} />
          </div>
        </div>
        <div className="grow">
          <div>
            {props.data.map((item, index) =>
              props.renderItem(item, index, props.data),
            )}
          </div>
          <div>
            <Button onClick={props.onLoadMore} loading={props.isLoading}>
              Load More
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AdvancedList;