"use client"; // Ganz oben hinzufügen
import React, { useState } from "react";
import Layout from "../layout"; // Korrigierter Pfad zu Layout

function Kabelueberwachung() {
  const [activeTab, setActiveTab] = useState(1);

  const racks = [
    { id: 1, name: "Rack 1" },
    { id: 2, name: "Rack 2" },
    { id: 3, name: "Rack 3" },
    { id: 4, name: "Rack 4" },
  ];

  return (
    <Layout>
      <div className="bg-gray-100 flex-1 p-4 overflow-hidden">
        {/* Tabs */}
        <ul className="flex border-b border-gray-200">
          {racks.map((rack) => (
            <li
              key={rack.id}
              className={`mr-1 ${
                activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
              }`}
            >
              <button
                onClick={() => setActiveTab(rack.id)}
                className={`inline-block px-4 py-2 rounded-t-lg ${
                  activeTab === rack.id
                    ? "bg-blue-500 text-white"
                    : "bg-white text-black hover:bg-gray-200"
                }`}
              >
                {rack.name}
              </button>
            </li>
          ))}
        </ul>
        {/* Rack-Inhalte */}
        <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
          {racks.map(
            (rack) =>
              activeTab === rack.id && (
                <div key={rack.id}>
                  <h2 className="text-lg font-bold mb-4">
                    {rack.name} Inhalte
                  </h2>
                  <table className="min-w-full bg-white border border-gray-300">
                    <thead>
                      <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                        <th className="py-3 px-4 text-left">Slot</th>
                        <th className="py-3 px-4 text-left">Bezeichnung</th>
                        <th className="py-3 px-4 text-center">
                          Isolationsgrenzwert
                        </th>
                        <th className="py-3 px-4 text-center">
                          Schleifengrenzwert
                        </th>
                        <th className="py-3 px-4 text-center">Filterzeit</th>
                        <th className="py-3 px-4 text-center">Aktionen</th>
                      </tr>
                    </thead>
                    <tbody className="text-gray-600 text-sm">
                      {Array.from({ length: 8 }, (_, index) => (
                        <tr key={index} className="border-b border-gray-200">
                          <td className="py-3 px-4 text-left">
                            Slot {index + 1}
                          </td>
                          <td className="py-3 px-4 text-left">
                            Beispielbezeichnung
                          </td>
                          <td className="py-3 px-4 text-center">0.5 MOhm</td>
                          <td className="py-3 px-4 text-center">10 kOhm</td>
                          <td className="py-3 px-4 text-center">5 sek.</td>
                          <td className="py-3 px-4 text-center">
                            <button className="bg-blue-500 text-white px-3 py-1 rounded">
                              Bearbeiten
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )
          )}
        </div>
      </div>
    </Layout>
  );
}

export default Kabelueberwachung;
