lasuite-docs/src/frontend/apps/impress/src/components/InfiniteScroll.tsx

import { Button } from '@gouvfr-lasuite/cunningham-react';
import { PropsWithChildren } from 'react';
import { useTranslation } from 'react-i18next';
import { InView } from 'react-intersection-observer';

import { Box, BoxType, Icon } from '@/components';

interface InfiniteScrollProps extends BoxType {
  hasMore: boolean;
  isLoading: boolean;
  next: () => void;
  scrollContainer?: HTMLElement | null;
  buttonLabel?: string;
}

export const InfiniteScroll = ({
  children,
  hasMore,
  isLoading,
  next,
  buttonLabel,
  ...boxProps
}: PropsWithChildren<InfiniteScrollProps>) => {
  const { t } = useTranslation();
  const loadMore = (inView: boolean) => {
    if (!inView || isLoading) {
      return;
    }
    void next();
  };

  return (
    <Box
      {...boxProps}
      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
    >
      {children}
      <InView onChange={loadMore}>
        {!isLoading && hasMore && (
          <Button
            onClick={() => void next()}
            color="brand"
            variant="bordered"
            icon={<Icon iconName="arrow_downward" />}
          >
            {buttonLabel ?? t('Load more')}
          </Button>
        )}
      </InView>
    </Box>
  );
};