
import React, { useRef } from "react";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Upload, Image as ImageIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface FileUploadZoneProps {
  aspectRatio: number;
  dragActive: boolean;
  uploading: boolean;
  onDragEnter: (e: React.DragEvent) => void;
  onDragLeave: (e: React.DragEvent) => void;
  onDragOver: (e: React.DragEvent) => void;
  onDrop: (e: React.DragEvent) => void;
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const FileUploadZone = ({
  aspectRatio,
  dragActive,
  uploading,
  onDragEnter,
  onDragLeave,
  onDragOver,
  onDrop,
  onFileSelect
}: FileUploadZoneProps) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    if (!uploading) {
      fileInputRef.current?.click();
    }
  };

  return (
    <>
      <div
        className={cn(
          "border-2 border-dashed cursor-pointer transition-colors rounded-lg",
          dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300",
          uploading && "pointer-events-none opacity-50"
        )}
        onDragEnter={onDragEnter}
        onDragLeave={onDragLeave}
        onDragOver={onDragOver}
        onDrop={onDrop}
        onClick={handleClick}
      >
        <AspectRatio ratio={aspectRatio}>
          <div className="flex flex-col items-center justify-center h-full text-center p-8">
            <div className="rounded-full bg-gray-100 p-4 mb-4">
              <Upload className="h-8 w-8 text-gray-400" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">
              Glissez une image ici
            </h3>
            <p className="text-sm text-gray-600 mb-4">
              ou cliquez pour sélectionner un fichier
            </p>
            <div className="flex items-center space-x-2 text-xs text-gray-500">
              <ImageIcon className="h-4 w-4" />
              <span>JPG, PNG, WebP • Max 2MB • Compression automatique</span>
            </div>
          </div>
        </AspectRatio>
      </div>
      
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        onChange={onFileSelect}
        className="hidden"
        disabled={uploading}
      />
    </>
  );
};

export default FileUploadZone;
