export default function ScannerCountPill({ count, onReview }) {
  if (count <= 0) return null;

  return (
    <div className="glass-panel rounded-xl px-4 py-3 flex items-center justify-between">
      <span
        className="text-sm font-medium"
        style={{ color: 'var(--text-primary)' }}
      >
        {count} {count === 1 ? 'card' : 'cards'} scanned
      </span>

      <button
        type="button"
        onClick={onReview}
        className="text-sm font-medium underline-offset-2 hover:underline transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded px-2 py-1"
        style={{
          color: 'var(--accent-ember)',
          '--tw-ring-color': 'var(--accent-ember)',
          '--tw-ring-offset-color': 'transparent',
          minHeight: 44,
          minWidth: 44,
          display: 'inline-flex',
          alignItems: 'center',
        }}
        aria-label={`Review ${count} scanned cards`}
      >
        Review →
      </button>
    </div>
  );
}