type Meldung = {
  t: string;
  s: number;
  c: string;
  m: string;
  i: string;
  v: string;
};

export default function MeldungenTabelle({
  messages,
}: {
  messages: Meldung[];
}) {
  return (
    <div className="overflow-auto max-h-[80vh]">
      <table className="min-w-full border">
        <thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 text-left sticky top-0 z-10">
          <tr>
            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
              Prio
            </th>
            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
              Zeitstempel
            </th>
            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
              Quelle
            </th>
            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
              Meldung
            </th>
            <th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
              Status
            </th>
          </tr>
        </thead>
        <tbody>
          {messages.map((msg, index) => (
            <tr
              key={index}
              className="hover:bg-gray-100 dark:hover:bg-gray-700"
            >
              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                <div
                  className="w-4 h-4 rounded"
                  style={{ backgroundColor: msg.c }}
                ></div>
              </td>
              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                {new Date(msg.t).toLocaleString("de-DE", {
                  day: "2-digit",
                  month: "2-digit",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                  second: "2-digit",
                })}
              </td>
              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                {msg.i}
              </td>
              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                {msg.m}
              </td>
              <td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
                {msg.v}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {messages.length === 0 && (
        <div className="mt-4 text-center text-gray-500 italic">
          Keine Meldungen im gewählten Zeitraum vorhanden.
        </div>
      )}
    </div>
  );
}
