/**
 * ProjectSearchDropdown 演示组件
 * 用于测试项目搜索下拉功能
 */
import { useState } from 'react';
import { ProjectSearchDropdown } from './ProjectSearchDropdown';

export function ProjectSearchDropdownDemo() {
  const [selectedProject, setSelectedProject] = useState<string>('');
  const [selectedProjectName, setSelectedProjectName] = useState<string>('');

  const handleProjectSelect = (projectId: string, projectName: string) => {
    setSelectedProject(projectId);
    setSelectedProjectName(projectName);
    console.log('Selected project:', { projectId, projectName });
  };

  return (
    <div className="p-6 max-w-md mx-auto space-y-4">
      <h2 className="text-lg font-semibold">项目搜索下拉演示</h2>
      
      <div className="space-y-2">
        <label className="text-sm font-medium">选择项目</label>
        <ProjectSearchDropdown
          value={selectedProject}
          onSelect={handleProjectSelect}
          placeholder="搜索并选择项目..."
        />
      </div>

      {selectedProject && (
        <div className="p-3 bg-muted rounded-md">
          <p className="text-sm">
            <strong>选中的项目:</strong>
          </p>
          <p className="text-sm text-muted-foreground">
            ID: {selectedProject}
          </p>
          <p className="text-sm text-muted-foreground">
            名称: {selectedProjectName}
          </p>
        </div>
      )}

      <div className="text-xs text-muted-foreground">
        <p>功能特性:</p>
        <ul className="list-disc list-inside space-y-1 mt-1">
          <li>支持项目名称搜索</li>
          <li>树形结构展示</li>
          <li>搜索关键词高亮</li>
          <li>智能展开匹配项</li>
          <li>键盘导航支持</li>
        </ul>
      </div>
    </div>
  );
}