// src/component/upload/upload.tsx
import React, { useState } from 'react'
import './upload.css'

const UploadComponent: React.FC = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null)

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedFile(e.target.files[0])
    }
  }

  const handleUpload = () => {
    if (selectedFile) {
      console.log('上传文件：', selectedFile)
      // 此处可以添加实际上传逻辑
    }
  }

  return (
    <div className="uploadContainer">
      <label className="uploadLabel" htmlFor="upload-input">请选择文件上传：</label>
      <input
        type="file"
        id="upload-input"
        className="uploadInput"
        data-testid="upload-input"
        onChange={handleFileChange}
      />
      <label htmlFor="upload-input">
        <div
          className="uploadButton"
          data-testid="upload-button"
          onClick={handleUpload}
        >
          点击上传
        </div>
      </label>
    </div>
  )
}

export default UploadComponent