// /components/uiWidgets/VersionInfoModal.js
import React from "react";

const VersionInfoModal = ({ showVersionInfoModal, closeVersionInfoModal, APP_VERSION }) => {
  const appVersion = process.env.NEXT_PUBLIC_APP_VERSION;
  return (
    <>
      {showVersionInfoModal && (
        <div className="fixed inset-0 flex items-center justify-center z-50">
          <div
            className="fixed inset-0 bg-black bg-opacity-50"
            onClick={closeVersionInfoModal}
          ></div>
          <div className="bg-white p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
            <img src="img/Logo_TALAS.png" alt="TALAS V5 Logo" className="w-1/2 mx-auto my-4" />
            <div className="bg-white border p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
              <h2 className="text-xl font-bold mb-6 text-start leading-tight">
                Littwin Systemtechnik GmbH & Co. KG
              </h2>
              <h4 className="text-lg font-bold mb-2 text-start leading-tight">
                Bürgermeister-Brötje Str. 28
              </h4>
              <h4 className="text-lg font-bold mb-2 text-start leading-tight">D-26180 Rastede</h4>
              <h5 className="text-md mb-2 text-start leading-snug">T: +49 4402 9725 77-0</h5>
              <h5 className="text-md mb-2 text-start leading-snug">
                E: kontakt@littwin-systemtechnik.de
              </h5>
            </div>
            <p className="text-gray-700 text-center font-bold mt-4 leading-relaxed">
              TALAS.Map Version {appVersion}
            </p>
            <button
              onClick={closeVersionInfoModal}
              className="mt-4 bg-littwin-blue text-white px-4 py-2 rounded mx-auto block"
            >
              Schließen
            </button>
          </div>
        </div>
      )}
    </>
  );
};

export default VersionInfoModal;