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 border-base table-surface text-fg">
        <thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
          <tr>
            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
              Prio
            </th>
            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
              Zeitstempel
            </th>
            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
              Quelle
            </th>
            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
              Meldung
            </th>
            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
              Status
            </th>
          </tr>
        </thead>
        <tbody>
          {messages.map((msg, index) => (
            <tr
              key={index}
              className="transition-colors hover:bg-surface-alt/60"
            >
              <td className="border border-base p-2 bg-surface text-fg">
                <div
                  className="w-4 h-4 rounded"
                  style={{ backgroundColor: msg.c }}
                ></div>
              </td>
              <td className="border border-base p-2 bg-surface text-fg">
                {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 border-base p-2 bg-surface text-fg">
                {msg.i}
              </td>
              <td className="border border-base p-2 bg-surface text-fg">
                {msg.m}
              </td>
              <td className="border border-base p-2 bg-surface text-fg">
                {msg.v}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {messages.length === 0 && (
        <div className="mt-4 text-center text-fg-muted italic">
          Keine Meldungen im gewählten Zeitraum vorhanden.
        </div>
      )}
    </div>
  );
}