'use client';

import { Bell } from 'lucide-react';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useNotifications } from '@/components/notifications/NotificationProvider';
import type { NotificationVariant } from '@/components/notifications/notificationTypes';
import type { DemoNotificationType, DemoUrgency } from '../types';

interface NotificationSendSectionProps {
  selectedType: DemoNotificationType;
  selectedUrgency: DemoUrgency;
  sending: boolean;
  lastSent: string | null;
  onSend: () => void;
}

export function NotificationSendSection({ 
  selectedType, 
  selectedUrgency, 
  sending, 
  lastSent, 
  onSend 
}: NotificationSendSectionProps) {
  return (
    <div>
      <button
        onClick={onSend}
        disabled={sending}
        className={`
          w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all
          ${lastSent
            ? 'bg-performance-green/20 border border-performance-green/30 text-performance-green'
            : 'bg-primary-blue hover:bg-primary-blue/80 text-white'
          }
          disabled:opacity-50 disabled:cursor-not-allowed
        `}
      >
        {sending ? (
          <>
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
            Sending...
          </>
        ) : lastSent ? (
          <>
            ✓ Notification Sent!
          </>
        ) : (
          <>
            <Bell className="w-4 h-4" />
            Send Demo Notification
          </>
        )}
      </button>

      <div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline mt-2">
        <p className="text-[10px] text-gray-500">
          <strong className="text-gray-400">Silent:</strong> Notification center only<br/>
          <strong className="text-gray-400">Toast:</strong> Temporary popup (auto-dismisses)<br/>
          <strong className="text-gray-400">Modal:</strong> Blocking popup (may require action)
        </p>
      </div>
    </div>
  );
}