import React from 'react';
import { FolderPlus, Sparkles } from 'lucide-react';

interface EmptyStateProps {
  title: string;
  description: string;
  actionText: string;
  onAction: () => void;
}

/**
 * 空状态组件
 * 遵循现代化设计风格，提供更好的用户体验
 */
export const EmptyState: React.FC<EmptyStateProps> = ({
  title,
  description,
  actionText,
  onAction
}) => {
  return (
    <div className="flex flex-col items-center justify-center py-20 text-center animate-fade-in-up">
      {/* 图标区域 */}
      <div className="relative mb-8">
        {/* 背景装饰 */}
        <div className="absolute inset-0 bg-gradient-to-r from-primary-100 to-blue-100 rounded-full blur-2xl opacity-50 scale-150"></div>

        {/* 主图标 */}
        <div className="relative p-6 bg-gradient-to-r from-primary-50 to-blue-50 rounded-3xl border border-primary-100">
          <FolderPlus size={64} className="text-primary-600 animate-bounce-subtle" />

          {/* 装饰性小图标 */}
          <div className="absolute -top-2 -right-2 p-2 bg-yellow-100 rounded-full animate-pulse">
            <Sparkles size={16} className="text-yellow-600" />
          </div>
        </div>
      </div>

      {/* 文本内容 */}
      <div className="max-w-md space-y-4">
        <h3 className="text-2xl font-bold text-gray-900 mb-3">
          {title}
        </h3>
        <p className="text-gray-600 leading-relaxed text-lg">
          {description}
        </p>
      </div>

      {/* 操作按钮 */}
      <div className="mt-8">
        <button
          className="btn btn-primary btn-lg shadow-glow animate-pulse-slow"
          onClick={onAction}
        >
          <FolderPlus size={20} />
          {actionText}
        </button>
      </div>

      {/* 提示信息 */}
      <div className="mt-6 text-sm text-gray-500">
        <p>💡 提示：您可以通过拖拽文件夹到此处快速创建项目</p>
      </div>
    </div>
  );
};