'use client';

import { Bell, BellRing, AlertCircle } from 'lucide-react';
import type { DemoUrgency } from '../types';

interface UrgencyOption {
  urgency: DemoUrgency;
  label: string;
  description: string;
  icon: any;
}

interface UrgencySectionProps {
  selectedUrgency: DemoUrgency;
  onSelectUrgency: (urgency: DemoUrgency) => void;
}

export const urgencyOptions: UrgencyOption[] = [
  {
    urgency: 'silent',
    label: 'Silent',
    description: 'Only shows in notification center',
    icon: Bell,
  },
  {
    urgency: 'toast',
    label: 'Toast',
    description: 'Shows a temporary popup',
    icon: BellRing,
  },
  {
    urgency: 'modal',
    label: 'Modal',
    description: 'Shows blocking modal (may require response)',
    icon: AlertCircle,
  },
];

export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-2">
        <BellRing className="w-4 h-4 text-gray-400" />
        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
          Urgency Level
        </span>
      </div>

      <div className="grid grid-cols-3 gap-1">
        {urgencyOptions.map((option) => {
          const Icon = option.icon;
          const isSelected = selectedUrgency === option.urgency;

          return (
            <button
              key={option.urgency}
              onClick={() => onSelectUrgency(option.urgency)}
              className={`
                flex flex-col items-center gap-1 p-2 rounded-lg border transition-all text-center
                ${isSelected
                  ? option.urgency === 'modal'
                    ? 'bg-red-500/20 border-red-500/50'
                    : option.urgency === 'toast'
                      ? 'bg-warning-amber/20 border-warning-amber/50'
                      : 'bg-gray-500/20 border-gray-500/50'
                  : 'bg-iron-gray/30 border-charcoal-outline hover:bg-iron-gray/50'
                }
              `}
            >
              <Icon className={`w-4 h-4 ${
                isSelected
                  ? option.urgency === 'modal'
                    ? 'text-red-400'
                    : option.urgency === 'toast'
                      ? 'text-warning-amber'
                      : 'text-gray-400'
                  : 'text-gray-500'
              }`} />
              <span className={`text-[10px] font-medium ${
                isSelected
                  ? option.urgency === 'modal'
                    ? 'text-red-400'
                    : option.urgency === 'toast'
                      ? 'text-warning-amber'
                      : 'text-gray-400'
                  : 'text-gray-500'
              }`}>
                {option.label}
              </span>
            </button>
          );
        })}
      </div>
      <p className="text-[10px] text-gray-600 mt-1">
        {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
      </p>
    </div>
  );
}