import { RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface ShowNewItemsButtonProps {
  count: number;
  onShow: () => void | Promise<void>;
  isLoading?: boolean;
}

export const ShowNewItemsButton = ({
  count,
  onShow,
  isLoading = false
}: ShowNewItemsButtonProps) => {
  const itemText = count === 1 ? 'item' : 'items';
  
  return (
    <Button
      variant="default"
      size="sm"
      onClick={onShow}
      loading={isLoading}
      loadingText={`Loading ${count} ${itemText}...`}
      trackingLabel="show-new-queue-items"
    >
      <RefreshCw className="w-4 h-4 mr-2" />
      Show {count} New {count === 1 ? 'Item' : 'Items'}
    </Button>
  );
};