import React from 'react'
import { Upload, Loader2, CheckCircle, AlertCircle } from 'lucide-react'

interface DocumentUploadProps {
  onUpload: (file: File) => void
  isLoading: boolean
  success: string | null
  error: string | null
}

export const DocumentUpload: React.FC<DocumentUploadProps> = ({
  onUpload,
  isLoading,
  success,
  error,
}) => {
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      onUpload(file)
    }
  }

  return (
    <div className="flex items-center space-x-3">
      <input
        type="file"
        accept=".pdf,.docx,.txt"
        onChange={handleFileChange}
        disabled={isLoading}
        className="hidden"
        id="upload-file-input"
        data-testid="upload-file-input"
      />
      <label
        htmlFor="upload-file-input"
        className={`inline-flex items-center space-x-2 px-4 py-2 rounded cursor-pointer transition-colors duration-200 ${
          isLoading
            ? 'bg-gray-300 cursor-not-allowed'
            : 'bg-blue-500 hover:bg-blue-600 text-white'
        }`}
      >
        {isLoading ? (
          <>
            <Loader2 className="w-4 h-4 animate-spin" />
            <span>Uploading...</span>
          </>
        ) : (
          <>
            <Upload className="w-4 h-4" />
            <span>Upload</span>
          </>
        )}
      </label>

      {success && (
        <div className="flex items-center space-x-2 text-green-700">
          <CheckCircle className="w-4 h-4" />
          <span className="text-sm">{success}</span>
        </div>
      )}

      {error && (
        <div className="flex items-center space-x-2 text-red-700">
          <AlertCircle className="w-4 h-4" />
          <span className="text-sm">{error}</span>
        </div>
      )}
    </div>
  )
}
