'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Bell, Loader2 } from 'lucide-react';
import type { DemoNotificationType, DemoUrgency } from '../types';

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

export function NotificationSendSection({ 
  sending, 
  lastSent, 
  onSend 
}: NotificationSendSectionProps) {
  return (
    <Stack>
      <Button
        onClick={onSend}
        disabled={sending}
        variant={lastSent ? 'secondary' : 'primary'}
        fullWidth
        bg={lastSent ? 'bg-performance-green/20' : undefined}
        borderColor={lastSent ? 'border-performance-green/30' : undefined}
        color={lastSent ? 'text-performance-green' : undefined}
        icon={sending ? <Icon icon={Loader2} size={4} animate="spin" /> : lastSent ? undefined : <Icon icon={Bell} size={4} />}
      >
        {sending ? 'Sending...' : lastSent ? '✓ Notification Sent!' : 'Send Demo Notification'}
      </Button>

      <Stack p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
        <Text size="xs" color="text-gray-500" block>
          <Text weight="bold" color="text-gray-400">Silent:</Text> Notification center only
        </Text>
        <Text size="xs" color="text-gray-500" block>
          <Text weight="bold" color="text-gray-400">Toast:</Text> Temporary popup (auto-dismisses)
        </Text>
        <Text size="xs" color="text-gray-500" block>
          <Text weight="bold" color="text-gray-400">Modal:</Text> Blocking popup (may require action)
        </Text>
      </Stack>
    </Stack>
  );
}