import { Controller, Control, FieldError } from "react-hook-form";

interface FormFileUploadProps {
  name: string;
  control: Control<any>;
  label: string;
  required?: boolean;
  disabled?: boolean;
  error?: FieldError;
  accept?: string;
  className?: string;
}

export default function FormFileUpload({
  name,
  control,
  label,
  required,
  disabled,
  error,
  accept = ".pdf,.doc,.docx,.jpg,.jpeg,.png",
  className = "",
}: FormFileUploadProps) {
  return (
    <div>
      <label className="text-sm font-medium text-gray-700 mb-1 block">
        {label}
        {required && <span className="text-red-500">*</span>}
      </label>
      <Controller
        name={name}
        control={control}
        render={({ field }) => (
          <>
            <label
              className={`flex items-center justify-between cursor-pointer rounded-lg border-2 border-dashed px-4 py-6 text-sm transition-colors ${
                disabled
                  ? "bg-gray-50 border-gray-200 cursor-not-allowed"
                  : error
                    ? "border-red-300 bg-red-50 hover:border-red-400"
                    : "border-gray-300 bg-gray-50 hover:border-teal-500"
              } ${className}`}
            >
              <span className={disabled ? "text-gray-500" : "text-teal-600"}>
                {field.value?.name || "Upload Document"}
              </span>
              <svg
                className={`w-5 h-5 ${disabled ? "text-gray-400" : "text-teal-600"}`}
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12 16v-8m0 0l-3 3m3-3l3 3M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"
                />
              </svg>
              <input
                type="file"
                className="hidden"
                disabled={disabled}
                accept={accept}
                onChange={(e) => {
                  field.onChange(e.target.files?.[0] || null);
                }}
              />
            </label>
          </>
        )}
      />
      {error && (
        <p className="text-red-500 text-xs mt-1">{error.message}</p>
      )}
    </div>
  );
}