import { TabsContent } from '@/components/ui/tabs';
import Timeline from '../Timeline';
import { EmptyState, LoadingState } from './EmptyState';
import PaginationControls from './PaginationControls';

const TabContentComponent = ({
    config,
    timeline,
    isLoadingActivities,
    hasMoreActivities,
    isLoadingMoreActivities,
    onLoadMore,
    sentinelRef,
    refetchData,
    showAddButton = false,
}: TabContentProps) => (
    <TabsContent value={config.value} className="mt-0 p-3 sm:p-6">
        {isLoadingActivities ? (
            <LoadingState message={`Loading ${config.label.toLowerCase()}...`} />
        ) : timeline.length === 0 ? (
            <EmptyState config={config} showAddButton={showAddButton} />
        ) : (
            <>
                <Timeline groups={timeline} refetchData={refetchData} />
                <PaginationControls
                    hasMoreActivities={hasMoreActivities}
                    isLoadingMoreActivities={isLoadingMoreActivities}
                    onLoadMore={onLoadMore}
                    sentinelRef={sentinelRef}
                    completionText={`All ${config.value === 'activity' ? 'activities' : config.label.toLowerCase()} loaded`}
                    timelineLength={timeline.length}
                    loadMoreText={config.loadMoreText}
                />
            </>
        )}
    </TabsContent>
);

export default TabContentComponent;