"use client";
import React from "react";

export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
  if (!isOpen || !selectedInput) return null;

  return (
    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
        <h2 className="text-xl font-semibold text-blue-500 mb-4 border-b pb-2">
          Details für Eingang {selectedInput.id}
        </h2>
        <div className="grid grid-cols-2 gap-x-4 gap-y-2">
          <div>
            <strong>Status:</strong>
          </div>
          <div>{selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}</div>

          <div>
            <strong>Beschreibung:</strong>
          </div>
          <div>{selectedInput.description}</div>

          <div>
            <strong>Name:</strong>
          </div>
          <div>{selectedInput.name}</div>

          <div>
            <strong>Invertierung:</strong>
          </div>
          <div>{selectedInput.invertierung ? "Ein" : "Aus"}</div>

          <div>
            <strong>Filterzeit:</strong>
          </div>
          <div>{selectedInput.filterzeit} ms</div>

          <div>
            <strong>Gewichtung:</strong>
          </div>
          <div>{selectedInput.gewichtung}</div>

          <div>
            <strong>Zählerstand:</strong>
          </div>
          <div>{selectedInput.zaehlerstand}</div>

          <div>
            <strong>Zähler aktiv:</strong>
          </div>
          <div>{selectedInput.zaehlerAktiv ? "Ja" : "Nein"}</div>

          <div>
            <strong>Eingang offline:</strong>
          </div>
          <div>{selectedInput.eingangOffline ? "Offline" : "Online"}</div>
        </div>
        <button
          onClick={closeInputModal}
          className="mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
        >
          Schließen
        </button>
      </div>
    </div>
  );
}