'use clint'

import { useState } from "react";

const ModalAction = ({
  title,
  text,
  confirmLabel,
  onConfirm,
  onClose,
  procedimentoNome,
  typeModal,
  disablebutton,
}: any) => {
  const [justificativa, setJustificativa] = useState("");

  const handleConfirm = () => {
    if (typeModal === "reject") {
      onConfirm(justificativa);
    } else {
      onConfirm();
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div
        className={`relative bg-white p-6 rounded-2xl shadow-lg w-[427px] ${
          typeModal === "reject" ? "h-[500px]" : "h-[374px]"
        } max-w-md flex-col justify-items-center items-center`}
      >
        <button
          onClick={onClose}
          className="absolute top-3 right-3 text-gray-500 hover:text-gray-700 text-xl font-bold"
          aria-label="Fechar modal"
        >
          &times;
        </button>

        <h2 className="text-lg font-bold text-plamev-blue-500 mb-3">{title}</h2>
        <p className="mb-6 text-center">{text}</p>

        <div className="flex flex-col w-full mb-8">
          <span className="mb-1">Procedimento:</span>
          <span className="font-semibold text-[15px]">{procedimentoNome}</span>
        </div>

        <p className="text-center">Deseja continuar?</p>

        {typeModal === "reject" && (
          <textarea
            className="w-full border rounded-lg p-2 text-sm mb-2 mt-2"
            placeholder="Informe o motivo da não autorização..."
            rows={3}
            value={justificativa}
            onChange={(e) => setJustificativa(e.target.value)}
          />
        )}

        {!disablebutton && (
          <div className="flex flex-col gap-3 mt-3 w-full">
            <button
              onClick={handleConfirm}
              className="bg-[#1DA1C2] text-white rounded-lg p-4 transition-colors h-[50px] w-full"
            >
              {confirmLabel}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default ModalAction;