'use client';

import { useState } from 'react';
import AddNotification from '@/components/dialogues/AddNotification';
import useNotifications from '@/hooks/useNotifications';
import { Plus } from 'lucide-react';

export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
    const { loadNotifications } = useNotifications();

  return (
    <div>
        <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
            <div className="flex items-center justify-between">
                <div>
                    <h2 className="text-lg font-bold">Notification Settings</h2>
                    <p className="text-sm opacity-70">Manage your notification settings</p>
                </div>
                <button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
                    <Plus className="w-5 h-5" />
                    Add Provider
                </button>
            </div>
            <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
        </div>
    </div>
  );
};