import type { RefCallback } from 'react';
import './progressive-rows.css';

interface Props {
  visibleCount: number;
  total: number;
  hasMore: boolean;
  loadMore: () => void;
  sentinelRef: RefCallback<HTMLDivElement>;
  unit?: string;
}

export function ProgressiveRowsStatus({ visibleCount, total, hasMore, loadMore, sentinelRef, unit = '条' }: Props) {
  return <div ref={sentinelRef} className="analysis-progressive-status">
    <span role="status" aria-live="polite">已加载 {visibleCount.toLocaleString('zh-CN')} / {total.toLocaleString('zh-CN')} {unit}</span>
    {hasMore ? <><span className="analysis-progressive-hint">下滚继续加载</span><button type="button" onClick={loadMore}>加载更多</button></> : <span className="analysis-progressive-hint">已显示全部</span>}
  </div>;
}