"use client";
import { useRef, useState } from "react";

interface FileDropzoneProps {
  onFile: (file: File) => void;
  accept?: string;
  multiple?: boolean;
  children: React.ReactNode;
}

export default function FileDropzone({
  onFile,
  accept = ".pdf,image/*",
  multiple = true,
  children,
}: Readonly<FileDropzoneProps>) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [dragActive, setDragActive] = useState(false);

  return (
    <button
      type="button"
      onClick={() => fileInputRef.current?.click()}
      onDragOver={(e) => {
        e.preventDefault();
        setDragActive(true);
      }}
      onDragLeave={() => setDragActive(false)}
      onDrop={(e) => {
        e.preventDefault();
        setDragActive(false);
        const f = e.dataTransfer.files[0];
        if (f) onFile(f);
      }}
      className={`relative rounded-xl border-2 border-dashed p-6 transition-all text-center flex flex-col items-center justify-center gap-2 cursor-pointer w-full ${
        dragActive
          ? "border-[#FCD704] bg-[#FCD704]/10"
          : "border-white/10 bg-[#13151A] hover:border-[#FCD704]/40 hover:bg-[#FCD704]/5"
      }`}
    >
      <input
        ref={fileInputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        className="hidden"
        onChange={(e) => {
          const selectedFiles = e.target.files;
          if (selectedFiles) {
            Array.from(selectedFiles).forEach(onFile);
          }
        }}
      />
      {children}
    </button>
  );
}