export default function OCRSettings({ onClose }) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div
        className="rounded-xl border max-w-md w-full p-6"
        style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}
      >
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
            Card Scanner
          </h2>
          <button
            onClick={onClose}
            className="p-2 rounded-lg hover:opacity-70"
            style={{ color: 'var(--text-secondary)' }}
            aria-label="Close"
          >
            ✕
          </button>
        </div>
        <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
          onClick={onClose}
          className="w-full px-4 py-2 rounded-lg font-medium"
          style={{ backgroundColor: 'var(--accent-ember)', color: 'white' }}
        >
          Got it
        </button>
      </div>
    </div>
  );
}