"use client"; // pages/access.tsx
import React from "react";

function Zutrittskontrolle() {
  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="bg-white rounded-lg shadow p-6 mb-8">
        <h2 className="text-xl font-bold text-blue-500 mb-4">
          Zutrittskontrolle 1
        </h2>
        <div className="flex justify-between">
          <div className="w-full lg:w-1/2 p-4">
            <table className="min-w-full text-sm">
              <tbody>
                <tr>
                  <td className="py-3 px-4">
                    <b>Betrieb</b>
                  </td>
                  <td className="py-3 px-4">Status: ...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">
                    <b>Status</b>
                  </td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Letzte Chip-ID</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Zeitstempel</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Access Typ</td>
                  <td className="py-3 px-4">...</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="w-full lg:w-1/2 p-4">
            <table className="min-w-full text-sm">
              <thead className="bg-gray-200">
                <tr>
                  <th className="py-3 px-4 text-center">Eingang</th>
                  <th className="py-3 px-4 text-center">Zustand</th>
                  <th className="py-3 px-4">Bezeichnung</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="py-3 px-4 text-center">1</td>
                  <td className="py-3 px-4 text-center">...</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4 text-center">2</td>
                  <td className="py-3 px-4 text-center">...</td>
                  <td className="py-3 px-4">...</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Zutrittskontrolle 2 */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-bold text-blue-500 mb-4">
          Zutrittskontrolle 2
        </h2>
        <div className="flex justify-between">
          <div className="w-full lg:w-1/2 p-4">
            <table className="min-w-full text-sm">
              <tbody>
                <tr>
                  <td className="py-3 px-4">
                    <b>Betrieb</b>
                  </td>
                  <td className="py-3 px-4">Status: ...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">
                    <b>Status</b>
                  </td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Letzte Chip-ID</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Zeitstempel</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Access Typ</td>
                  <td className="py-3 px-4">...</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="w-full lg:w-1/2 p-4">
            <table className="min-w-full text-sm">
              <thead className="bg-gray-200">
                <tr>
                  <th className="py-3 px-4 text-center">Eingang</th>
                  <th className="py-3 px-4 text-center">Zustand</th>
                  <th className="py-3 px-4">Bezeichnung</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="py-3 px-4 text-center">1</td>
                  <td className="py-3 px-4 text-center">...</td>
                  <td className="py-3 px-4">...</td>
                </tr>
                <tr>
                  <td className="py-3 px-4 text-center">2</td>
                  <td className="py-3 px-4 text-center">...</td>
                  <td className="py-3 px-4">...</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Zutrittskontrolle;