import AppButton from "@/components/ui/button";
import { List, ListProps, Spin } from "antd";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";

interface AppListProps<T>
  extends Omit<ListProps<T>, "dataSource" | "loadMore"> {
  data?: T[];
  loading?: boolean;
  renderItem: (item: T) => React.ReactNode;
  hasMore?: boolean;
  onLoadMore?: () => void;
  infiniteScroll?: boolean;
  loadMoreButtonText?: string;
  emptyText?: string;
}

const AppList = <T extends any>({
  data = [],
  loading = false,
  renderItem,
  hasMore = false,
  onLoadMore,
  infiniteScroll = false,
  loadMoreButtonText = "Load More",
  emptyText = "No Data",
  ...rest
}: AppListProps<T>) => {
  // Load more button
  const loadMoreButton = hasMore && (
    <div style={{ textAlign: "center", marginTop: 16 }}>
      <AppButton onClick={onLoadMore} loading={loading}>
        {loadMoreButtonText}
      </AppButton>
    </div>
  );

  // Render list
  const listContent = (
    <List
      loading={loading}
      dataSource={data}
      renderItem={renderItem}
      locale={{ emptyText }}
      loadMore={!infiniteScroll && loadMoreButton}
      {...rest}
    />
  );

  // Render infinite scroll list
  if (infiniteScroll) {
    return (
      <InfiniteScroll
        dataLength={data.length}
        next={onLoadMore || (() => {})}
        hasMore={hasMore}
        loader={<Spin style={{ display: "block", margin: "16px auto" }} />}
      >
        {listContent}
      </InfiniteScroll>
    );
  }
  return listContent;
};

export default AppList;