'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Sparkles } from 'lucide-react';

interface AdvancedEditorPromoProps {
  onSwitchToAdvanced: () => void;
}

export function AdvancedEditorPromo({ onSwitchToAdvanced }: AdvancedEditorPromoProps) {
  return (
    <Card className="p-4 bg-gradient-to-r from-green-50 dark:from-green-950 to-blue-50 dark:to-blue-950 border-green-200 dark:border-green-800">
      <div className="flex items-start gap-3">
        <Sparkles className="w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" />
        <div className="flex-1">
          <h4 className="text-green-800 dark:text-green-400 mb-1">💡 高级编辑器推荐</h4>
          <p className="text-sm text-muted-foreground mb-3">
            高级编辑器支持文件导入（KML/GeoJSON/SHP）、真实地图集成、版本管理等强大功能，适合专业GIS应用。
          </p>
          <Button
            size="sm"
            onClick={onSwitchToAdvanced}
            className="bg-green-600 hover:bg-green-700 text-white"
          >
            <Sparkles className="w-4 h-4 mr-2" />
            切换到高级编辑器
          </Button>
        </div>
      </div>
    </Card>
  );
}