import { ScannerCheckoutContent } from './ScannerCheckoutSheet.js';

export default function ScannerReview({
  queue,
  collections,
  variant,
  onOpenListPicker,
}) {
  if (variant === 'side-panel') {
    const cartCount = queue.scannedCards.filter((card) => !card.processed).length;

    return (
      <div className="flex flex-col h-full min-h-0 w-full" style={{ backgroundColor: 'var(--bg-primary)' }}>
        <div
          className="px-4 py-3"
          style={{ borderBottom: '1px solid var(--border)' }}
        >
          <h2 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>
            Cart
            {cartCount > 0 && (
              <span className="text-sm font-normal ml-1" style={{ color: 'var(--text-secondary)' }}>
                ({cartCount})
              </span>
            )}
          </h2>
        </div>

        {cartCount === 0 ? (
          <div className="flex-1 flex items-center justify-center px-4 py-8 text-center">
            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
              Scanned cards appear here. Use Review to commit when ready.
            </p>
          </div>
        ) : (
          <div className="flex flex-col flex-1 min-h-0">
            <ScannerCheckoutContent
              queue={queue}
              onOpenListPicker={onOpenListPicker}
              headerId="checkout-side-panel-title"
            />
          </div>
        )}
      </div>
    );
  }

  return null;
}