import React from 'react'
import {View, Text} from '@tarojs/components'
import {Popup} from '@nutui/nutui-react-taro'
import {Close, QrCode} from '@nutui/icons-react-taro'

export interface SimpleQRCodeModalProps {
  /** 是否显示弹窗 */
  visible: boolean
  /** 关闭弹窗回调 */
  onClose: () => void
  /** 二维码内容（礼品卡code码） */
  qrContent: string
}

const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
                                                               visible,
                                                               onClose,
                                                               qrContent
                                                             }) => {


  return (
    <Popup
      visible={visible}
      position="center"
      closeable
      closeIcon={<Close/>}
      onClose={onClose}
      style={{
        width: '85%',
        maxWidth: '350px',
        borderRadius: '12px'
      }}
    >
      <View className="p-6">
        {/* 标题 */}
        <View className="text-center mb-4">
          <Text className="text-lg font-bold">礼品卡二维码</Text>
          <Text className="text-sm text-gray-500 block mt-1">
            请向商家出示此二维码
          </Text>
        </View>

        {/* 二维码区域 */}
        <View className="text-center mb-4">
          <View className="p-4 bg-white border border-gray-200 rounded-lg">
            <View className="bg-gray-100 rounded flex items-center justify-center"
                  style={{width: '200px', height: '200px', margin: '0 auto'}}>
              <View className="text-center">
                <QrCode size="48" className="text-gray-400 mb-2"/>
                <Text className="text-gray-500 text-sm">二维码</Text>
                <Text className="text-xs text-gray-400 mt-1">ID: {qrContent ? qrContent.slice(-6) : '------'}</Text>
              </View>
            </View>
          </View>
        </View>

      </View>
    </Popup>
  )
}

export default SimpleQRCodeModal