import type { ChangeEvent, DragEvent, RefObject } from "react";

interface IdleStageProps {
  dragging: boolean;
  setDragging: (dragging: boolean) => void;
  onDrop: (e: DragEvent<HTMLLabelElement>) => void;
  onPick: (e: ChangeEvent<HTMLInputElement>) => void;
  inputRef: RefObject<HTMLInputElement | null>;
  loadError?: string | null;
}

export default function IdleStage({
  dragging,
  setDragging,
  onDrop,
  onPick,
  inputRef,
  loadError,
}: IdleStageProps) {
  return (
    <label
      onDragOver={(e) => {
        e.preventDefault();
        setDragging(true);
      }}
      onDragLeave={() => setDragging(false)}
      onDrop={onDrop}
      className={`relative flex min-h-110 cursor-pointer flex-col items-center justify-center gap-4 p-10 text-center transition-colors ${
        dragging
          ? "border-link-1 bg-link-1/4"
          : "border-border/70 hover:border-border"
      }`}
    >
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={onPick}
      />
      <div
        className={`flex h-16 w-16 items-center justify-center rounded-full border border-border text-link-1 ${
          dragging ? "animate-pulse" : ""
        }`}
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path
            d="M12 16V4M12 4L7 9M12 4l5 5"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
      <div>
        <p className="font-heading text-2xl italic text-heading">
          Place the print under inspection
        </p>
        <p className="mt-1.5 text-sm text-text">
          Drag a file, drop an exhibit from the case file, or click to browse
        </p>
      </div>
      <span className="mt-2 rounded-md gradient1 px-5 py-2.5  text-sm font-medium capitalize text-white shadow-button transition-opacity hover:opacity-90">
        Upload image
      </span>
      {loadError && <p className=" text-[11px] text-danger">{loadError}</p>}
      <p className="absolute bottom-4  text-[10px] uppercase tracking-[0.14em] text-text/60">
        JPG &middot; PNG &middot; WEBP &middot; up to 20MB
      </p>
    </label>
  );
}