import { Check, LoaderCircle } from "lucide-react";

const DocumentoInput = ({
  idNegocio,
  tipo,
  ids,
  idsOrigem,
  statusIds,
  verificando,
  setIds,
  verificarId,
}: any) => {
  const key = `${idNegocio}-${tipo}`;
  const valorAtual = ids?.[key] || "";
  const valorOriginal = idsOrigem?.[key] || "";
  const status = statusIds?.[key]?.status;
  const isVerificando = verificando?.[key];

  const houveMudanca = valorAtual !== valorOriginal;

  return (
    <div className="flex w-full items-center justify-center gap-3">
      <input
        type="text"
        placeholder="ID do Google Docs"
        value={ids?.[key] || ""}
        className={`mt-2 w-3/4 border rounded-lg px-2 py-1 text-sm text-center focus:ring-2 ${
          status === 0
            ? "ring-red-600 ring-2"
            : status === 1
              ? "ring-green-500"
              : ""
        }`}
        onChange={(e) =>
          setIds((prev: any) => ({ ...prev, [key]: e.target.value }))
        }
      />
      {isVerificando ? (
        <span className="animate-[spin_0.5s_linear_infinite]">
          <LoaderCircle size={17} />
        </span>
      ) : (
        houveMudanca && (
          <button
            onClick={() => verificarId(idNegocio, tipo)}
            type="button"
            className="text-gray-700 hover:text-green-600"
          >
            <Check size={17} />
          </button>
        )
      )}
    </div>
  );
};
export default DocumentoInput;