'use client';

import { Card } from '@/components/ui/card';

export function FeatureDescription() {
  return (
    <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
      <h4 className="text-blue-900 dark:text-blue-400 mb-2">✨ GIS地图功能特性</h4>
      <div className="grid grid-cols-2 gap-x-8 gap-y-1 text-sm text-blue-800 dark:text-blue-200">
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>支持多种地图底图（卫星、电子、地形、混合）</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>实时切换地图图层，无缝过渡</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>地图缩放、平移、全屏等基础操作</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>比例尺、坐标、图例动态显示</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>地块边界自动渲染，支持交互</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></div>
          <span>点击地块查看详细信息</span>
        </div>
      </div>
      <div className="mt-3 pt-3 border-t border-blue-300 dark:border-blue-700">
        <p className="text-xs text-blue-700 dark:text-blue-300">
          <strong>地图引擎：</strong>默认使用 Leaflet + OpenStreetMap（开源免费），也支持切换到高德地图（需配置Key）
        </p>
      </div>
    </Card>
  );
}