import { useNotifications } from "@/hooks/useNotifications";

export default function NotificacoesPage() {
  const { notifications, notificar, error } =
    useNotifications();

  return (
    <div style={{ padding: 16 }}>
      <h2>Notificações</h2>

      <div style={{ marginBottom: 12 }}>

        {error && <div style={{ color: "red" }}>Erro: {error}</div>}
      </div>

      <button
        onClick={() =>
          notificar({
            tipo_notificacao: "info",
            titulo_notificacao: "Olá",
            conteudo_notificacao: "Mensagem via WS",
          })
        }
      >
        Enviar notificação
      </button>

      <ul style={{ marginTop: 16 }}>
        {notifications.map((n) => (
          <li key={n.id}>
            <strong>{n.titulo_notificacao}</strong> — {n.conteudo_notificacao}
          </li>
        ))}
      </ul>
    </div>
  );
}