import Image from "next/image";
import { Upload } from "lucide-react";

interface ImageDropZoneProps {
  preview: string | null;
  fallback?: string;
  isDragging: boolean;
  onDragOver: (e: React.DragEvent) => void;
  onDragLeave: () => void;
  onDrop: (e: React.DragEvent) => void;
  onClick: () => void;
}

export function ImageDropZone({
  preview,
  fallback,
  isDragging,
  onDragOver,
  onDragLeave,
  onDrop,
  onClick,
}: ImageDropZoneProps) {
  const src = preview ?? fallback;
  return (
    <div
      className={`border-2 border-dashed rounded-lg p-8 text-center text-sm cursor-pointer transition-colors ${
        isDragging
          ? "border-primary bg-primary/5"
          : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
      } text-muted-foreground`}
      onClick={onClick}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
    >
      {src ? (
        <div className="flex flex-col items-center gap-2">
          <Image
            src={src}
            alt=""
            width={128}
            height={64}
            className="h-16 w-auto object-contain mx-auto"
          />
          <span className="text-xs text-muted-foreground">
            Click or drop to replace
          </span>
        </div>
      ) : (
        <div className="flex flex-col items-center gap-2">
          <Upload className="h-8 w-8 mx-auto text-muted-foreground/50" />
          <span>Click to upload or drag &amp; drop</span>
          <span className="text-xs text-muted-foreground/60">
            PNG, JPG, SVG, WEBP
          </span>
        </div>
      )}
    </div>
  );
}