import { Upload } from "lucide-react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { IMAGE_UPLOAD_ACCEPT, MAX_UPLOAD_BYTES, formatUploadLimitMb } from "@/config/uploads";

interface ImageDropzoneProps {
  productIndex: number;
  onDrop: (files: File[]) => void;
}

export const ImageDropzone = ({ onDrop }: ImageDropzoneProps) => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: IMAGE_UPLOAD_ACCEPT,
    maxSize: MAX_UPLOAD_BYTES,
    onDrop: (acceptedFiles) => {
      onDrop(acceptedFiles);
    },
    onDropRejected: (rejections) => {
      rejections.forEach((rejection) => {
        const tooLarge = rejection.errors.some((e) => e.code === 'file-too-large');
        const reason = tooLarge
          ? `larger than ${formatUploadLimitMb()} limit`
          : rejection.errors[0]?.message ?? 'rejected';
        toast.error(`${rejection.file.name}: ${reason}`);
      });
    },
  });

  return (
    <div 
      {...getRootProps()}
      className={cn(
        "border-2 border-dashed border-secondary-foreground/30 bg-muted/90 rounded-md h-24 w-24 flex flex-col items-center justify-center self-center cursor-pointer hover:bg-muted/70 transition-colors shrink-0",
        isDragActive && "border-primary bg-muted"
      )}
    >
      <input {...getInputProps()} />
      {isDragActive ? (
        <div className="text-xs text-center text-muted-foreground p-1">Drop images here</div>
      ) : (
        <>
          <Upload className="h-5 w-5 mb-1 text-muted-foreground" />
          <span className="text-xs text-muted-foreground">Add Images</span>
        </>
      )}
    </div>
  );
}; 