deckhearth/components/OCRSettings.js

import { Modal, Button } from './ui';

export default function OCRSettings({ onClose }) {
  return (
    <Modal open onClose={onClose} title="Card Scanner" size="md">
      <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
        Card identification runs on Deck Hearth&apos;s servers using Gemini Vision. No API
        keys are required in your browser.
      </p>
      <ul className="text-sm space-y-2 mb-6" style={{ color: 'var(--text-secondary)' }}>
        <li>Hold the card steady in the camera frame for best results.</li>
        <li>If multiple matches are found, you will be asked to pick the correct printing.</li>
        <li>
          Unknown cards are saved for admin review instead of being added to the global
          catalog.
        </li>
      </ul>
      <Button variant="primary" onClick={onClose} className="w-full">
        Got it
      </Button>
    </Modal>
  );
}