deckhearth/components/CardDetailQuantityModal.js

import { VOCAB } from '../lib/collection-vocabulary.js';
import { Modal } from './ui';

export default function CardDetailQuantityModal({
  isOpen,
  ownedQuantity,
  quantity,
  onQuantityChange,
  onConfirm,
  onClose,
}) {
  return (
    <Modal
      open={isOpen}
      onClose={onClose}
      title={ownedQuantity > 0 ? 'Update Quantity' : VOCAB.ADD_TO_MY_COLLECTION}
      size="md"
    >
        <div className="mb-6">
          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
            Quantity
          </label>
          <div className="flex items-center gap-4">
            <button
              type="button"
              onClick={() => onQuantityChange(Math.max(1, quantity - 1))}
              className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
              style={{
                backgroundColor: 'var(--bg-secondary)',
                borderColor: 'var(--border)',
                color: 'var(--text-primary)',
              }}
            >
              -
            </button>
            <span className="text-2xl font-bold px-4" style={{ color: 'var(--text-primary)' }}>
              {quantity}
            </span>
            <button
              type="button"
              onClick={() => onQuantityChange(quantity + 1)}
              className="w-10 h-10 rounded-lg flex items-center justify-center border transition-all duration-200 hover:shadow-md"
              style={{
                backgroundColor: 'var(--bg-secondary)',
                borderColor: 'var(--border)',
                color: 'var(--text-primary)',
              }}
            >
              +
            </button>
          </div>
        </div>
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => onConfirm(quantity)}
            className="flex-1 px-4 py-2 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
          >
            {ownedQuantity > 0 ? 'Update' : VOCAB.ADD_TO_MY_COLLECTION}
          </button>
          <button
            type="button"
            onClick={onClose}
            className="flex-1 px-4 py-2 rounded-xl font-medium border transition-all duration-200"
            style={{
              borderColor: 'var(--border)',
              color: 'var(--text-secondary)',
            }}
          >
            Cancel
          </button>
        </div>
    </Modal>
  );
}