react.tsx

import React, { useContext } from "react";
import { NotificationContext } from "../../context/notification";
import { formatUnixTimeInNigeria } from "../../utils";

interface LogData {
  opener?: string;
  key?: string;
  level?: string;
  solver?: string;
  culprit?: string;
  newPrincipal?: string;
  registrar?: string;
  proxy?: string;
  timeFired: string;
}

function Notification() {
  const data: LogData[] = useContext(NotificationContext);

  // console.log('output logs',logs)
  return (
    <>
      <h3 className="font-ocra text-white font-bold uppercase text-center mb-2 text-2xl">
        Ctf update
      </h3>
      <section className="bg-gray-500 w-[30%] rounded-lg mx-auto overflow-y-auto">
        <div className="flex justify-center">
          <div>
            {data?.map((item, index) => {
              let message = "";

              if (item?.opener && item?.key) {
                message = `${item.opener} unlocked the door  with key ${item.key}`;
              } else if (item.solver && item.level) {
                message = `${item.solver} solved ${item.level}`;
              } else if (item.opener && item.level) {
                message = `${item.opener} unlocked the door  with key ${item.level}`;
              } else if (item.culprit && item.newPrincipal) {
                message = `Player ${item.culprit} tried to deposit ${item.newPrincipal}`;
              } else if (item.registrar && item.proxy) {
                message = `${item.registrar}  ${item.proxy}`;
              }
              const formattedTime = formatUnixTimeInNigeria(
                item.timeFired.toString()
              );
              console.log(formattedTime);
              return (
                <p key={index} className="text-white font-ocra">
                  <span>{formattedTime} - </span> {message}
                </p>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

export default Notification;