import { Loader2 } from 'lucide-react';
import { RefObject } from 'react';
import { Button } from '../ui/button';

const PaginationControls = ({
    hasMoreActivities,
    isLoadingMoreActivities,
    onLoadMore,
    sentinelRef,
    timelineLength,
    loadMoreText,
    completionText,
}: {
    hasMoreActivities: boolean;
    isLoadingMoreActivities: boolean;
    onLoadMore?: () => void;
    sentinelRef?: RefObject<HTMLDivElement>;
    timelineLength: number;
    loadMoreText: string;
    completionText: string;
}) => (
    <>
        {hasMoreActivities && <div ref={sentinelRef} className="h-px" />}
        {isLoadingMoreActivities && (
            <div className="flex items-center justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin text-primary" />
                <span className="ml-2 text-sm text-slate-600">Loading more...</span>
            </div>
        )}
        {hasMoreActivities && !isLoadingMoreActivities && (
            <div className="flex justify-center py-8">
                <Button onClick={onLoadMore} disabled={isLoadingMoreActivities} variant="outline" size="lg" className="min-w-[200px]">
                    {loadMoreText}
                </Button>
            </div>
        )}
        {!hasMoreActivities && timelineLength > 0 && (
            <div className="py-8 text-center">
                <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-4 py-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
                    <p className="text-xs font-medium text-slate-500">{completionText}</p>
                    <div className="h-1.5 w-1.5 rounded-full bg-slate-400"></div>
                </div>
            </div>
        )}
    </>
);

export default PaginationControls;