import { useRef } from "react";
import IconUpload from "./Icon/IconUpload";

interface Props {
    value: File | null;
    onChange: (file: File | null) => void;
    accept?: string;
    maxSize?: number;
    disabled?: boolean;
}

const FileDropzone = ({ value, onChange, accept = "*" }: Props) => {
    const inputRef = useRef<HTMLInputElement | null>(null);

    const handleFile = (file: File | null) => {
        onChange(file);
    };

    return (
        <div
            onClick={() => inputRef.current?.click()}
            className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50 transition"
        >
            <input
                ref={inputRef}
                type="file"
                accept={accept}
                className="hidden"
                onChange={(e) => {
                    const file = e.target.files?.[0] || null;
                    handleFile(file);
                }}
            />

            <div className="flex flex-col items-center gap-2">
                <IconUpload />

                {!value ? (
                    <>
                        <p className="text-sm text-gray-600">
                            Drag & drop file here or click to upload
                        </p>
                        <span className="text-xs text-gray-400">
                            PDF, DOC, Images supported
                        </span>
                    </>
                ) : (
                    <div className="text-sm font-medium text-green-600">
                        {value.name}
                    </div>
                )}
            </div>
        </div>
    );
};

export default FileDropzone;