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

function Einausgaenge() {
  // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen)
  const inputs = [
    {
      id: 1,
      name: "Eingang 1",
      status: "Aktiv",
      description: "Beschreibung 1",
    },
    {
      id: 2,
      name: "Eingang 2",
      status: "Inaktiv",
      description: "Beschreibung 2",
    },
    {
      id: 3,
      name: "Eingang 3",
      status: "Aktiv",
      description: "Beschreibung 3",
    },
    {
      id: 4,
      name: "Eingang 4",
      status: "Inaktiv",
      description: "Beschreibung 4",
    },
  ];

  const outputs = [
    {
      id: 1,
      name: "Ausgang 1",
      status: "Aktiv",
      description: "Beschreibung 1",
    },
    {
      id: 2,
      name: "Ausgang 2",
      status: "Inaktiv",
      description: "Beschreibung 2",
    },
    {
      id: 3,
      name: "Ausgang 3",
      status: "Aktiv",
      description: "Beschreibung 3",
    },
    {
      id: 4,
      name: "Ausgang 4",
      status: "Inaktiv",
      description: "Beschreibung 4",
    },
  ];

  // Zustand für aktiven Tab (Ein- oder Ausgänge)
  const [activeTab, setActiveTab] = useState("inputs");

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      {/* Tabs für Ein- und Ausgänge */}
      <ul className="flex border-b border-gray-200">
        <li
          className={`mr-1 ${
            activeTab === "inputs" ? "border-blue-500 text-blue-600" : ""
          }`}
        >
          <button
            onClick={() => setActiveTab("inputs")}
            className={`inline-block px-4 py-2 rounded-t-lg ${
              activeTab === "inputs"
                ? "bg-blue-500 text-white"
                : "bg-white text-black hover:bg-gray-200"
            }`}
          >
            Eingänge
          </button>
        </li>
        <li
          className={`mr-1 ${
            activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
          }`}
        >
          <button
            onClick={() => setActiveTab("outputs")}
            className={`inline-block px-4 py-2 rounded-t-lg ${
              activeTab === "outputs"
                ? "bg-blue-500 text-white"
                : "bg-white text-black hover:bg-gray-200"
            }`}
          >
            Ausgänge
          </button>
        </li>
      </ul>

      {/* Inhalt für die aktiven Tabs */}
      <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
        {activeTab === "inputs" && (
          <div>
            <h2 className="text-lg font-bold mb-4">Eingänge</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">ID</th>
                  <th className="py-3 px-4 text-left">Name</th>
                  <th className="py-3 px-4 text-left">Status</th>
                  <th className="py-3 px-4 text-left">Beschreibung</th>
                </tr>
              </thead>
              <tbody className="text-gray-600 text-sm">
                {inputs.map((input) => (
                  <tr key={input.id} className="border-b border-gray-200">
                    <td className="py-3 px-4 text-left">{input.id}</td>
                    <td className="py-3 px-4 text-left">{input.name}</td>
                    <td className="py-3 px-4 text-left">{input.status}</td>
                    <td className="py-3 px-4 text-left">{input.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {activeTab === "outputs" && (
          <div>
            <h2 className="text-lg font-bold mb-4">Ausgänge</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">ID</th>
                  <th className="py-3 px-4 text-left">Name</th>
                  <th className="py-3 px-4 text-left">Status</th>
                  <th className="py-3 px-4 text-left">Beschreibung</th>
                </tr>
              </thead>
              <tbody className="text-gray-600 text-sm">
                {outputs.map((output) => (
                  <tr key={output.id} className="border-b border-gray-200">
                    <td className="py-3 px-4 text-left">{output.id}</td>
                    <td className="py-3 px-4 text-left">{output.name}</td>
                    <td className="py-3 px-4 text-left">{output.status}</td>
                    <td className="py-3 px-4 text-left">
                      {output.description}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}

export default Einausgaenge;