"use client";

import { Info } from "lucide-react";

/**
 * Подсказка о возможностях правил навигации
 */
export function NavigationRulesHelper() {
  return (
    <div className="rounded-lg border border-blue-200 bg-blue-50 dark:bg-blue-950/20 dark:border-blue-900 p-3 text-xs">
      <div className="flex gap-2">
        <Info className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
        <div className="space-y-2">
          <p className="font-semibold text-blue-900 dark:text-blue-100">
            Правила навигации поддерживают все типы условий:
          </p>
          <ul className="space-y-1 text-blue-800 dark:text-blue-200">
            <li>• <strong>AB тесты (Unleash)</strong> - тестируйте разные пути через воронку</li>
            <li>• <strong>Опции</strong> - на основе выбора в list экранах</li>
            <li>• <strong>Значения</strong> - возраст, зодиак, email домен</li>
            <li>• <strong>Комбинации</strong> - несколько условий одновременно (AND)</li>
          </ul>
          <p className="text-blue-700 dark:text-blue-300 mt-2">
            Для AB теста выберите <strong>&quot;Тип условия&quot; → &quot;AB тест (Unleash)&quot;</strong>
          </p>
        </div>
      </div>
    </div>
  );
}
