import React, { PropsWithChildren } from "react";
import { cn } from "@/lib/utils/cn";
import { ResourceListProvider } from "./resource-list-provider";

type Props<T extends object = object> = PropsWithChildren<{
    className?: string;
    selection?: boolean;
    data?: T[];
    perPage?: number;
    page?: number;
    total?: number;
    orderBy?: string;
    orderDir?: string;
    onOrderByChange?: (orderBy?: string) => void;
    onOrderDirChange?: (orderDir?: "asc" | "desc") => void;
    onPerPageChange?: (perPage: number) => void;
    onPageChange?: (page: number) => void;
}>;

export const ResourceList = <T extends object = object>(props: Props<T>) => {
    const {
        className,
        selection,
        data = [],
        perPage = 15,
        page = 0,
        total = 0,
        orderBy,
        orderDir,
        children,
        onOrderByChange,
        onOrderDirChange,
        onPerPageChange,
        onPageChange
    } = props;

    return (
        <ResourceListProvider<T>
          data={data}
          selection={selection}
          perPage={perPage}
          page={page}
          total={total}
          orderBy={orderBy}
          orderDir={orderDir}
          onOrderByChange={onOrderByChange}
          onOrderDirChange={onOrderDirChange}
          onPerPageChange={onPerPageChange}
          onPageChange={onPageChange}>
            <div className={cn("flex w-full flex-col gap-2.5 overflow-auto px-4 py-1", className)}>
                {children}
            </div>
        </ResourceListProvider>
    );
};