import React from "react";
import { Icon } from "@iconify/react"; // Für Iconify Icons

function Kue705FO({
  isolationswert, // Übergabeparameter für den Isolationswert
  schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
  modulName, // Übergabeparameter für den Modulnamen
  kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
}) {
  return (
    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
      {/* Hauptkörper - Linker Bereich */}
      <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
        {/* Header-Bereich mit Slotnummer und Zahnrad */}
        <div className="flex items-start justify-between h-[30px] ">
          {/* Slotnummer */}
          <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
            <span className="text-white text-[10px]">1</span>
          </div>

          {/* KÜ705-FO Text */}
          <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>

          {/* Zahnrad-Icon */}
          <button
            onClick={() => console.log("Settings clicked")}
            className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
          >
            <span className="text-white text-[20px]">⚙</span>
          </button>
        </div>

        {/* Betrieb und Alarm Status */}
        <div className="flex flex-col mt-[10px] ml-[10px]">
          <div className="flex items-center">
            <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
            <span className="text-white text-[10px]">Betrieb</span>
          </div>
          <div className="flex items-center mt-1">
            <div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
            <span className="text-white text-[10px]">Alarm</span>
          </div>
        </div>

        {/* Isolationswert-Anzeige */}
        <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
          <div className="text-center">
            <span>{isolationswert || ">200"}</span>{" "}
            {/* Dynamischer Isolationswert */}
            <div className="text-[8px]">ISO MOhm</div>
          </div>
        </div>

        {/* Weiße Linien */}
        <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
        <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>

        {/* Modulname-Anzeige */}
        <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
          {modulName || "Test1"} {/* Dynamischer Modulname */}
        </div>

        {/* Version */}
        <div className="absolute bottom-1 right-1 text-black text-[8px]">
          {kueVersion} {/* Dynamische Version */}
        </div>
      </div>

      {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
      <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
        <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
          Schleifenwiderstand [kOhm]
        </span>
        {/* Schleifenwiderstand Anzeige */}
        <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
          {/* Icon rechts oben */}
          <button
            onClick={() => console.log("Refresh clicked")}
            className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
          >
            <span className="text-white text-[18px]">⟳</span>
          </button>

          {/* Wertanzeige */}
          <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
            {/* Dynamischer Schleifenwiderstand */}
            <div className="top-[220px] left-[10px] text-black text-[10px]">
              <p>{schleifenwiderstand || "0"} kOhm</p>
            </div>
          </div>
        </div>

        {/* Schleife und TDR Buttons nebeneinander */}
        <div className="flex mt-2 space-x-1">
          <button
            onClick={() => console.log("Schleife clicked")}
            className="w-[50%] h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center"
          >
            Schleife
          </button>
          <button
            onClick={() => console.log("TDR clicked")}
            className="w-[50%] h-[25px] bg-gray-400 text-white text-[10px] flex items-center justify-center"
          >
            TDR
          </button>
        </div>

        {/* Messkurve Button */}
        <button
          onClick={() => console.log("Messkurve clicked")}
          className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
        >
          Messkurve
        </button>
      </div>
    </div>
  );
}

export default Kue705FO;