import { Timeline } from '@/components/ui/timeline';
import { ActivityTimelineItem } from '@/features/documents/components/activity-timeline-item';
import type { DocumentActivityTimelineItem } from '@/features/documents/types';
import { useI18n } from '@/hooks/use-i18n';

type ActivityTimelineProps = {
    items: DocumentActivityTimelineItem[];
    hasMore?: boolean;
    isLoadingMore?: boolean;
    onLoadMore?: () => void;
};

export function ActivityTimeline({ items, hasMore, isLoadingMore, onLoadMore }: ActivityTimelineProps) {
    const { t } = useI18n();

    return (
        <Timeline
            items={items}
            renderItem={(item) => <ActivityTimelineItem item={item} />}
            hasMore={hasMore}
            isLoadingMore={isLoadingMore}
            onLoadMore={onLoadMore}
            maxHeight="520px"
            emptyState={
                <div className="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
                    {t('documents.admin_show.activity.empty')}
                </div>
            }
        />
    );
}