'use client'

import React from 'react'
import { QRCodeUpload } from '@/components/QRCodeUpload'
import type { VocabWorksheetHook } from '../types'

export function QRCodeModal({ h }: { h: VocabWorksheetHook }) {
  const { isDark } = h

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => h.setShowQRModal(false)} />
      <div className={`relative w-full max-w-md rounded-3xl ${
        isDark ? 'bg-slate-900' : 'bg-white'
      }`}>
        <QRCodeUpload
          sessionId={h.uploadSessionId}
          onClose={() => h.setShowQRModal(false)}
          onFilesChanged={(files) => {
            h.setMobileUploadedFiles(files)
            if (files.length > 0) {
              h.setSelectedMobileFile(files[files.length - 1])
              h.setDirectFile(null)
              h.setSelectedDocumentId(null)
            }
          }}
        />
      </div>
    </div>
  )
}