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-gray-100 text-left sticky top-0 z-10">
          <tr>
            <th className="p-2 border">Prio</th>
            <th className="p-2 border">Zeitstempel</th>
            <th className="p-2 border">Quelle</th>
            <th className="p-2 border">Meldung</th>
            <th className="p-2 border">Status</th>
          </tr>
        </thead>
        <tbody>
          {messages.map((msg, index) => (
            <tr key={index} className="hover:bg-gray-50">
              <td className="border p-2">
                <div
                  className="w-4 h-4 rounded"
                  style={{ backgroundColor: msg.c }}
                ></div>
              </td>
              <td className="border p-2">{msg.t}</td>
              <td className="border p-2">{msg.i}</td>
              <td className="border p-2">{msg.m}</td>
              <td className="border p-2">{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>
  );
}