import { useState } from 'react';
import Button from '../ui/Button';
import Modal from '../ui/Modal';

const SCANNER_TIPS = [
  { lead: 'Good lighting', body: 'avoid glare on foil cards.' },
  { lead: 'Fill the frame', body: 'with one card; keep corners visible.' },
  { lead: 'Hold still', body: 'until Auto-detect locks the match.' },
  { lead: 'Use Batch Scan', body: 'for a pile of photos from your gallery.' },
  { lead: 'Switch camera', body: 'if the image is dark or mirrored.' },
];

function LightbulbIcon() {
  return (
    <svg
      className="h-5 w-5"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
      />
    </svg>
  );
}

export default function ScannerTips({ className = '' }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        variant="ghost"
        size="sm"
        className={className}
        leadingIcon={<LightbulbIcon />}
        onClick={() => setOpen(true)}
      >
        Scanner Tips
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Scanner Tips"
        size="md"
      >
        <ol className="space-y-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
          {SCANNER_TIPS.map((tip) => (
            <li key={tip.lead}>
              <strong style={{ color: 'var(--text-primary)' }}>{tip.lead}</strong>
              {' — '}
              {tip.body}
            </li>
          ))}
        </ol>
      </Modal>
    </>
  );
}