import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterPagamentoCliente } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { useEffect, useState } from "react";
import ItemPagamentoCliente from "./ItemPagamentoCliente";
const InformacoesPagamentoCliente = ({ dadosNegocio }: any) => {
  const [pagamentoCliente, setPagamentoCliente] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    obterPagamentoCliente({ id_coleta: dadosNegocio.id_coleta })
      .then((dadosPagamento) => {
        setPagamentoCliente(dadosPagamento);
      })
      .finally(() => setIsLoaded(true));
  }, []);

  // const formatarData = (dataString: any) => {
  //   try {
  //     const data = parseISO(dataString);
  //     if (isValid(data)) {
  //       return format(data, "dd/MM/yyyy", { locale: ptBR });
  //     }
  //     return "Data inválida";
  //   } catch (error) {
  //     console.error("Erro ao formatar data:", error);
  //     return "Data inválida";
  //   }
  // };

  // return pagamentoCliente.map((pagamento, index) => (
  //   <div className="space-y-4" key={index}>
  //     <div className="flex items-center space-x-2">
  //       <span className="font-semibold text-gray-700">Data Pagamento:</span>
  //       <span className="text-gray-900">
  //         {formatarData(pagamento.data_pagamento_cliente)}
  //       </span>
  //     </div>
  //     <div className="flex items-center space-x-2">
  //       <span className="font-semibold text-gray-700">Observação:</span>
  //       <span className="text-gray-900">
  //         {pagamento.obs_pagamento_cliente}
  //       </span>
  //     </div>
  //     {pagamento.imagem && (
  //       <div className="flex flex-col space-y-2">
  //         <span className="font-semibold text-gray-700">Imagem:</span>
  //         <img
  //           src={dadosNegocio.anexoPagamentoCliente_coleta}
  //           alt="Anexo"
  //           className="mt-2 rounded shadow-lg w-64 h-auto object-cover"
  //         />
  //       </div>
  //     )}
  //   </div>
  // ));
  return (
    <div className="max-h-[90vh] overflow-auto">
      <div className="text-lg font-semibold">Aprovação de Crédito</div>
      <div>
        {isLoaded ? (
          pagamentoCliente.length > 0 ? (
            pagamentoCliente.map((pagamento, index) => (
              <ItemPagamentoCliente itemPagamento={pagamento} key={index} />
            ))
          ) : (
            <div>Não há Aprovação de Crédito</div>
          )
        ) : (
          <div className="flex justify-center w-full">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  );
};

export default InformacoesPagamentoCliente;