"use client";
import React, { useState } from "react";

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 (
    <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>
  );
}

export default Kabelueberwachung;