// pages/Zutrittskontrolle.jsx
import React from "react";
import Layout from "../components/Layout";

function Access() {
  return (
    <Layout>
      <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>
    </Layout>
  );
}

export default Access;