import { View } from "react-native";

import { MobileTableControls } from "./MobileTableControls";
import { DesktopTableControls } from "./DesktopTableControls";

interface TableControlsProps {
  searchQuery: string;
  menuVisible: boolean;
  menuAnchor: { x: number; y: number };
  searchPlaceholder?: string;
  onSearch: (query: string) => void;
  onMenuDismiss: () => void;
  onItemsPerPageChange: (value: number) => void;
  itemsPerPage?: number;
  renderFilterComponent?: () => React.ReactNode;
  renderFilterChips?: () => React.ReactNode;
  renderActionButtons?: () => React.ReactNode;
  itemsPerPageMenuOptions?: number[];
}

export const TableControls = ({
  searchQuery,
  menuVisible,
  menuAnchor,
  searchPlaceholder = "Search",
  onSearch,
  onMenuDismiss,
  onItemsPerPageChange,
  itemsPerPage = 25,
  renderFilterComponent,
  renderFilterChips,
  renderActionButtons,
  itemsPerPageMenuOptions,
}: TableControlsProps) => {
  return (
    <>
      <View className="hidden md:flex flex-col mb-4">
        <DesktopTableControls
          searchQuery={searchQuery}
          menuVisible={menuVisible}
          menuAnchor={menuAnchor}
          onSearch={onSearch}
          onMenuDismiss={onMenuDismiss}
          onItemsPerPageChange={onItemsPerPageChange}
          itemsPerPage={itemsPerPage}
          renderFilterComponent={renderFilterComponent}
          renderFilterChips={renderFilterChips}
          renderActionButtons={renderActionButtons}
          itemsPerPageMenuOptions={itemsPerPageMenuOptions}
          searchPlaceholder={searchPlaceholder}
        />
      </View>

      <View className="flex md:hidden flex-col mb-4">
        <MobileTableControls
          searchQuery={searchQuery}
          menuVisible={menuVisible}
          menuAnchor={menuAnchor}
          onSearch={onSearch}
          onMenuDismiss={onMenuDismiss}
          onItemsPerPageChange={onItemsPerPageChange}
          itemsPerPage={itemsPerPage}
          renderFilterComponent={renderFilterComponent}
          renderFilterChips={renderFilterChips}
          renderActionButtons={renderActionButtons}
          itemsPerPageMenuOptions={itemsPerPageMenuOptions}
          searchPlaceholder={searchPlaceholder}
        />
      </View>
    </>
  );
};